Title: Surprised CSS height:0% does what?
Tags: css
Question: I am a newbie to CSS and I stumbled on something strange.
Looking at the code below, changing the height to 0% shrinks the background colour to the text but does not collapse it the way width 0% does. Any explanations?
margin: 10px;
font-size: 200%;
color: white;
height: 0%;
width: 100%;
border: 2px solid black;
div:nth-child(1) {
background-color: red;
div:nth-child(2) {
background-color: blue;
<div&gt;I am the next div element</div&gt;
<div&gt;I am the next div element</div&gt;
Comment: Actually, your percentage height is doing gfowler@example.com. That's because for percentage heights to work, you need to define the height of the parent. http://stackoverflow.com/a/31728799/3597276

Comment: @Michael_B I think the confusion here is not so much that percentages don't work, but that elsewhere in the CSS reference materials it's always mentioned that `0em`, `0px` etc is the same as `0`. So it's not unnatural to assume that the same goes for `0%`.



{'source': 'StackExchangeDataset', 'subset': 'stackoverflow.com', 'metadata': {'AnswerCount': 0, 'CommentCount': 2, 'ContentLicense': 'CC BY-SA 3.0', 'CreationDate': '2017:00:01/29/17', 'FavoriteCount': None, 'PostTypeId': 1, 'Tags': '<css>', 'Title': 'Surprised CSS height:0% does what?', 'ViewCount': 30, 'id': 41927060, 'user_AboutMe': None, 'user_AccountId': 10133982.0, 'user_DisplayName': 'Zachra', 'user_Reputation': 11.0, 'user_Views': 6.0, 'user_id': 7486254.0}}