0

.test {
    border: 1px solid;
    background-color: linen;
    padding:5px;
}

.one {
    display:inline-block;
    padding:10px;
    width:70%;
    background-color: lightgreen;

}

.two {
    display:inline-block;
    width:20%;
    background-color: lightblue;
}

.sub-one {
     background-color: green;
     color:white;
     margin-bottom:1px;
}
<div class="test">

    <div class="one">

        <div class="sub-one">first block-level child-element</div>

        <div class="sub-one">
            second block-level child-element
        </div> 

    </div>


    <div class="two">
        inline-block sibling
    </div>
    
</div>

So, in this example, the container (test) contains two inline-block elements. So, they both sit inside the line-box of the block container (test). However, why is it that;

  1. If I create a block-level child-element inside the first inline-block (one), why does the content of the block-level child-element sits inside the same line-box with the other sibling inline-block (two)? How are they in the same line-box, since the block-level child-element (sub-one) does not sit inside a line-box?

  2. If I create a second block-level child-elements inside the first inline-block (one), why does the first child-elements gets excluded, and now only the second block-level child-element sits inside a line-box together with the other sibling inline-block (two)?

Here's a snapshot to illustrate my question:

enter image description here

happy_story
  • 1
  • 1
  • 7
  • 17
  • another related question with more details: https://stackoverflow.com/q/9273016/8620333 – Temani Afif Dec 06 '20 at 20:29
  • 1
    check the question I linked, it contains more details (forget the other one). The key is to understand how baseline is calculated for each inline-block element – Temani Afif Dec 06 '20 at 20:32
  • you are overthinking this .. you have ONE line box and inside 2 inline-block element aligned at their baseline. What inside each one is irrelevant and will only define the basline so there is no linebox of a child inside with another one outside – Temani Afif Dec 06 '20 at 20:35
  • From the link I shared: *The baseline of an 'inline-block' is the baseline of its last line box in the normal flow, unless it has either no in-flow line boxes or if its 'overflow' property has a computed value other than 'visible', in which case the baseline is the bottom margin edge.* --> find the baseline of each inline-block element and you will understand why you have this output – Temani Afif Dec 06 '20 at 20:36
  • So, the fact that the first inline-block contains block-level elements doesn't matter? The text inside those block-level elements is still inside the line-box of the main container? Why? Isn't the text inside the block-level elements inside their own line-box which their parent creates? How are they connected? And why is the second inline-block aligned with the second child-element? What about the first one? – happy_story Dec 06 '20 at 20:49
  • There is absolutely no connection, you are facing the *illusion* of the baseline alignment. One and Two are inline block elements inside a unique line box in the test container, this story ends here, nothing more. What is inside One has no connection to the outside. Inside one you have a block formatting context (2 block) and inside each of them one line box, it ends here, no connection with the outside. Now, both One and Two are aligned at the baseline (read again my comment to find what is the baseline). That's all – Temani Afif Dec 06 '20 at 20:54
  • So, it's the inline-blocks themselves, not the text inside, that get aligned on the baseline of the line-box of the block-container (test)? So then, when the second child-element is added inside the first inline-block, it just increases the height of the inline-block, thus pushing down the baseline. Is that correct? – happy_story Dec 06 '20 at 21:10
  • yes, as simple as that – Temani Afif Dec 06 '20 at 21:15
  • I see. One more question, just to make sure I get it right. Line-box is only formed around inline-level elements, correct? The text inside an inline-level element is not sitting inside a line-box, is that right? I know that the text inside a block-level element sits inside an anonymous inline-level element, which itself sits inside a line-box but what about the text inside an inline-level element? Does it sits inside any box? – happy_story Dec 06 '20 at 21:43
  • simply consider the fact that if you remove the inline-level element wrapping your text then you will get the same result. In other words, using `tex` or only `text` is alsmot the same since the latter one will get an anonymous box around it so it's not really about the text but the box around ... well, it's not easy to explain too but the text and it's inline container are somehow the same entity since the text inside will affect a lot the position of the element containing the text. – Temani Afif Dec 06 '20 at 21:54
  • So, just to be clear, the inline-container does not form a line-box around its text, right? It's just the text inside the inline-box? – happy_story Dec 06 '20 at 22:23

0 Answers0