0

I still get confused about some fundamentals of CSS's display property. Consider the following simple html:

.outer {
  background-color: red;
  display: inline;
}

.inner {
  display: inline;
}
<div class="outer">
  <div class="inner">
    Some Text
  </div>
</div>

Then both divs have inline display, and you see something close to:

enter image description here.

This is what I expect, since I think of 'inline' as meaning something like a 'minimal wrap around' of whatever it contains. In this case, it happens to be wrapping an inline div that itself is minimally wrapping 'Some Text'.

However, if I now change the CSS of the inner div so that its display is now 'block', then I no longer see any red background color. But why? Firefox inspector indicates that the outer div is present, and that it has the same size as the inner div (which I'd expect given my 'minimal-wrapping' understanding), but its background-color does not show through.

Please let me know what subtle CSS rule is causing this non-intuitive behavior. Here is a codepen of the final, puzzling state.

Temani Afif
  • 245,468
  • 26
  • 309
  • 415
Anastasius Vivaldus
  • 325
  • 2
  • 12
  • 1
    you cannot have `block` inside `inline` – Temani Afif May 04 '19 at 14:47
  • You can use `inline-block` as a drop in replacement for having `block` inside an `inline` element – Martin May 04 '19 at 14:50
  • @TemaniAfif why then does angular create components that have 'display: inline'? For example, if I create a compontent HomePageComponent then it will end up in my browser as an element like `` with 'display:inline'. But then people put block-level components in custom angular components ! Understanding this was my original motivation for looking into this matter. – Anastasius Vivaldus May 04 '19 at 17:48
  • I don't know Angular so I cannot reply to you but there is for sure an explanation. You can probably ask another question to show the code and this behavior. Probably your missing something or a setting you need to do – Temani Afif May 04 '19 at 19:20

0 Answers0