1

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? 

div {
  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>I am the next div element</div>
<div>I am the next div element</div>
vals
  • 61,425
  • 11
  • 89
  • 138
Zachra
  • 11
  • 3
  • Actually, your percentage height is doing nothing at all. That's because for percentage heights to work, you need to define the height of the parent. http://stackoverflow.com/a/31728799/3597276 – Michael Benjamin Jan 29 '17 at 23:23
  • @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%`. – Mr Lister Jan 30 '17 at 07:41

0 Answers0