0

* {
  margin:0;
  padding:0;
}


.container {
  font-size:20px;
  line-height:100px;
  border: 1px solid;
  background-color: lightblue;
}


p {
  display: inline;
  background: coral;
  line-height:50px;
}
<div class="container">
    <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit.</p>
</div>

In this example, the line-height of the child-element is 50px, but because it's inline, the line-height does not expand the content-box of the element. The size of the container remains the size of its line-height - 100px.

* {
  margin:0;
  padding:0;
}


.container {
  font-size:20px;
  line-height:100px;
  border: 1px solid;
  background-color: lightblue;
}


p {
  display: block;
  background: coral;
  line-height:50px;
}
<div class="container">
    <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit.</p>
</div>

In this example, i have only changed the display property of the child-element from inline to block, and now its content-box has expanded because of the line-height, however, the container has collapsed to fit the element inside. I don't understand what happens to the line-height of the container? Why doesn't the container remain 100px?

I know that if i enter some text, the container will expand again to 100px, since the line-height of that text will be 100px. For example:

* {
  margin:0;
  padding:0;
}


.container {
  font-size:20px;
  line-height:100px;
  border: 1px solid;
  background-color: lightblue;
}


p {
  display: block;
  background: coral;
  line-height:50px;
}
<div class="container">gfgfg
    <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit.</p>
</div>

..but why is that text not necessary when the child-element is inline?

happy_story
  • 1
  • 1
  • 7
  • 17
  • 1
    Does this answer your question? [Line height issue with inline-block elements](https://stackoverflow.com/questions/54341767/line-height-issue-with-inline-block-elements) – Aib Syed Nov 11 '20 at 19:33
  • 1
    *I don't understand what happens to the line-height of the container? Why doesn't the container remain 100px?* --> you no more have inline element and you have a Block Formatting Context so no more line box and line-height will do nothing. Line-height is only considered when there is line boxes – Temani Afif Nov 11 '20 at 19:38
  • @TemaniAfif but why does the block-element still inherits the line-height of the container? Without setting a separate line-height for the child-element when it's display block, it will inherit the line-height of the container and remain the same size. Same thing happens with inline child-elements. But the difference is that, when child element is block, the inherited line-height of the child sets the size of the container, but when its inline, it's still the line-height of the container that sets the size. Why is that? What is meant by line-height applies to line-box when block also inherits? – happy_story Nov 11 '20 at 19:48
  • 1
    when you have a Block formatting context you forget about line-height. The height is defined by the sum of the block height inside so in all the case your container will have the height of block child element and that child inherit the line height to apply it to its text inside and have its height defined by that line height – Temani Afif Nov 11 '20 at 19:51
  • 1
    read this: https://stackoverflow.com/a/61835863/8620333 I made a detailed explanation there. Take the time to follow it closely, there is a lot of steps – Temani Afif Nov 11 '20 at 19:52
  • @TemaniAfif Hi. So i think i understand how it all works now, but there's something i am wondering. When you have a block container that contains two child-elements. One is block-level (p), the other is inline-level (span). Now, what is the formatting context of the parent? It's height is still decided by its line-height, however, the block child-element participates in a BFC. So, is it correct to say that the formatting context of the container is inline, but somehow the block-level element participates in a BFC inside the IFC? – happy_story Nov 12 '20 at 16:05
  • https://www.w3.org/TR/CSS21/visuren.html#anonymous-block-level – Temani Afif Nov 12 '20 at 16:24
  • but anonymous block-level element is created whenever you have a block-level child-element and then you just add some text in the container. I am talking about having a span sibling, which is not anonymous, and not block-level. As i mentioned, the fact that line-height decides the height of the container should suggest that either the formatting context is inline, or the container is some sort of a line-box. If inside was a BFC, line-height wouldn't have changed its height. Either way, a span is not an anonymous box. – happy_story Nov 12 '20 at 19:52

0 Answers0