Why does the extra space between two inline-elements get filled with background-color, but it doesn't for the space between two inline-block elements?

Question

.div1 {
    display:inline;
    background-color:blue;
}

.div2 {
    display:inline;
    background-color: orange;

}

.div3 {
    display:inline-block;
    background-color:red ;
}


.div4 {
    display:inline-block;
    background-color:greenyellow;
}

<div class="div1">
   Lorem ipsum
</div>

<div class="div2">
    Lorem ipsum
</div> <br>

<div class="div3">
    Lorem ipsum
</div>

<div class="div4">
    Lorem ipsum
</div>

</body>

And here's a picture to better illustrate my question. PICTURE

I know this might be a silly question and largely irrelevant, but i am just curious to know why does the first inline-element create an extra 4px width that covers the background-color, while the inline-block element create the same 4px width, but it doesn't get covered by the background-color.

I know it most likely has something to do with the fact that, width is not respected in inline-elements, but it is respected for inline-block elements.

Does anyone have any idea why this is happening?

I believe this is because with `display: inline` the top and bottom margins & paddings are not respected (so the `div`s are butted against each other) while with `display: inline-block`, they are. — blurfus, Oct 22 '20 at 21:06
@disinfor I don't see how that answers the question? Could you perhaps point me to where the answer is given? One of the answers says that inline-block sets a default white-space just like inline-elements do. But for inline-elements, the extra white-space gets covered with the background-color, but for inline-block, it doesn't. So i want to know why. Is that explained somewhere in the question? — happy_story, Oct 22 '20 at 21:32
@Ihatecontrolfreaks It's the third (or second) comment on the accepted answer. — disinfor, Oct 22 '20 at 22:00

Temani Afif · Accepted Answer · 2020-10-22T22:20:42.637

3

Your answer is within the specification.

For each inline (including anonymous inlines; see [CSS2] section 9.2.2.1) within an inline formatting context, ...

Any collapsible space immediately following another collapsible space—even one outside the boundary of the inline containing that space, provided both spaces are within the same inline formatting context—is collapsed to have zero advance width. (It is invisible, but retains its soft wrap opportunity, if any.)

It's a bit complex but in the case of inline element the spaces will collapse into one space that will be inside the first inline element and not between both inline element. This is because you had a space at the end of your inline element. In other words, all the spaces will collapse into the first one and the position of the first space will decide about the visual.

Remove the space at the end of your inline elements and you will have a different result:

.div1 {
  display: inline;
  background-color: lightblue;
}

.div2 {
  display: inline;
  background-color: orange;
}

<div class="box">
  <div class="div1"> Lorem ipsum </div>
  <div class="div2"> Lorem ipsum </div>
</div>
<div class="box">
  <div class="div1"> Lorem ipsum</div>
  <div class="div2"> Lorem ipsum </div>
</div>

A configuration with the space inside the second element:

.div1 {
  display: inline;
  background-color: lightblue;
}

.div2 {
  display: inline;
  background-color: orange;
}

<div class="box">
  <div class="div1"> Lorem ipsum </div>
  <div class="div2"> Lorem ipsum </div>
</div>
<div class="box">
  <div class="div1"> Lorem ipsum</div><div class="div2">   Lorem ipsum </div>
</div>

With inline-block it's different because space from the outside cannot collapse with the space inside the inline-block element.

inline-block

This value causes an element to generate an inline-level block container. The inside of an inline-block is formatted as a block box, and the element itself is formatted as an atomic inline-level box.^ref

^{Related: CSS Spec - Atomic Inline Level Boxes}

The spaces inside inline-block element are proceeded alone and they will get trimmed following the below rules:

A sequence of collapsible spaces at the beginning of a line is removed.

A sequence at the end of a line of collapsible spaces is removed,

Then the spaces between inline-block element will collapse into one space. So in all the cases, you will have a space between your inline-block elements whataver the combination of the spaces inside/outside unless there is no space between them

.div1 {
  display: inline-block;
  background-color: lightblue;
}

.div2 {
  display: inline-block;
  background-color: orange;
}

<div class="box">
  <div class="div1"> Lorem ipsum </div>
  <div class="div2"> Lorem ipsum </div>
</div>
<div class="box">
  <div class="div1"> Lorem ipsum</div>
  <div class="div2"> Lorem ipsum </div>
</div>

<div class="box">
  <div class="div1"> Lorem ipsum</div><div class="div2">   Lorem ipsum </div>
</div>

edited Oct 22 '20 at 22:20

answered Oct 22 '20 at 21:34

Temani Afif

245,468
26
309
415

I see. So in the case of inline-blocks, the extra white-space does not collapse into one space part of the first element? – happy_story Oct 22 '20 at 21:39
@Ihatecontrolfreaks in the case of inline-block, you have 2 collapsing .. inside the inline-block itsefl (the first and last spaces are trimmed) and between both inline-block the sapces will collapse into one.. for the inline element we have only one collapsing, all the spaces are considered together then the result is made inside the div (I will try to add more detail to illustrate) – Temani Afif Oct 22 '20 at 21:41
Yes, an image illustration would be very helpful. I am finding it hard to understand what you mean by the 2 collapsing.. the first and last spaces being trimmed, and then the space between the two inline-blocks.. i thought the space between the two inline-blocks is the collapsing space, or the "last space" as you called it, and the first one is the beginning of the element. – happy_story Oct 22 '20 at 21:49
It's complex, but simply: `inline` elements collapse the white space around them - that's why there is no gap. `inline-block` elements do not collapse the space from the OUTSIDE of the box with the space on the INSIDE of the box. Think of an inline-block element as having a bounding box that the space on the outside cannot collapse with the space on the inside of that box. – disinfor Oct 22 '20 at 21:52
@Ihatecontrolfreaks added more details with examples – Temani Afif Oct 22 '20 at 22:09
@disinfor I am confused about what is space from the OUTSIDE and what is space from the inside? Do inline-elements have those? I thought the extra space that gets created is because its inline element, and the extra space is for the next word that comes next. So, what inside and outside space am i suppose to imagine here? I sort of understand why the extra space contains the background in inline-elements, it's likely because the extra space is part of the content-box of the inline-element, so it contains its background color, but how is it different for inline-block elements? – happy_story Oct 22 '20 at 22:15
@Ihatecontrolfreaks inline-block are *closed* element so what is inside them cannot interact with the text outside. A trivial example is that inline-block won't wrap with text outside: https://jsfiddle.net/beqzokc7/4/ .. the same for spaces, they don't interact with the outside world – Temani Afif Oct 22 '20 at 22:18
So, i keep reading your answer over and over again and trying to understand why does adding the extra space at the beginning and end of the text inside the inline-element results in the created extra 4px width containing the background-color, but when you remove that extra space inside the text, now just like with inline-block, the extra 4px width do not contain the background-color. I am going to have to re-read this tomorrow with fresh mind, because i am way too tired and can't seem to comprehend well. I just want to ask you something while you're still here. – happy_story Oct 22 '20 at 22:31
When you say that the outside space collapse, i am not sure what you're referring to. I thought that the extra 4px space is the extra width of the content-box that gets created to give space to the next word. How is that "outside"? Isn't that just the width of the first element? Am i looking at this the wrong way? – happy_story Oct 22 '20 at 22:32
1

@Ihatecontrolfreaks the space is the character space you enter with your keyboard. It's not related to any 4px or nothing (it can have any width based on the font and other paremetre). In your code you have a lot of spaces and line break (you tapped with your keyboard). I am calling the ones outside the div the *outside spaces* and the one inside the divs the *inside spaces*.The algorithm will collapse them to only one space and will trim the ones at the start of the line and the end of the line with a small difference between inline and inline-block (like detailed in my answer) – Temani Afif Oct 22 '20 at 22:37
When you say "collapse" do you mean that, the extra width space, similar to collapsing margins, is created by both elements, the left and the right, but it becomes part of the first one? But why does adding space before and after the text results in the extra 4px width between the two elements not containing the background-color, but removing that after and before space results in the extra 4px width not containing the background color? Sorry if i keep asking the same questions. It's really hard to grasp this. – happy_story Oct 22 '20 at 22:37
1

@Ihatecontrolfreaks remove the 4px from your head and see it as white space between you character that you tapped with your keyboard. Also forget the background for one moment and see all the spaces as a contiguous sequence (only in the case of inline elements) and then remove all of them and keep only the first one (the collapse algorithm) and at the end see where that first space is located (inside the first one? the last one? or in between?) and you will understand what coloration apply – Temani Afif Oct 22 '20 at 22:41
@Ihatecontrolfreaks the difference with inline-block is that you cannot see the same contiguous sequence because inline-block will create a seperation due to the nature of inline-block element so you need to proceed the white spaces differently (inside the inline-block alone and then outside the inline-block) – Temani Afif Oct 22 '20 at 22:42
I think i am having trouble understanding you because i don't know what you're seeing exactly. You talk about all the spaces, but are you talking about the after and before spaces of div1 and div2 in the code, or are you talking about the image that i posted in my question of the actual outcome? In the outcome, there is only one space between div1 and div2, in my code, div1 and div2 are on top of each other. So are you viewing them as if they were next to each other? You have to be more specific about what you are referring to exactly. – happy_story Oct 22 '20 at 22:53
Also, is the "outside space" the character space? Let's say we remove all the after and before space inside the div1 and div2, now the outcome is that there is 4px space between them. That is the character space, correct? Now it doesn't contain the background-color. But if i add one extra space after and before the text inside both div1 and div2, the outcome is that that extra 4px space gets filled with background-color. That is the only difference that i see. – happy_story Oct 22 '20 at 22:57
So i just tested something. I added just one extra space after the text of div1, and the result was the same. The outside character space got filled with background-color. So i am guessing this happens because the extra inside space is part of the content-box, wheres if i don't add extra inside space, there is non, and the 4px space between the elements is created by the browser, and that's why it's empty, because it's not part of either element? – happy_story Oct 22 '20 at 23:00
@Ihatecontrolfreaks your divs are on the top of each other because you have *line breaks* and those are also kind of *spaces*. The space**s** I am refering to are the ones in the code. The outcome or the visual you see is the result of the white space algorithm so there is a lot of job done by the browser between your code and the visual and it's not as easy as you may think. All the spaces, line breaks, tabulation, etc etc are treated to get the outcome of only one space. I advise you to read again my answer and follow the links I posted. there is a lot of steps you need to understand – Temani Afif Oct 22 '20 at 23:01
@Ihatecontrolfreaks the browser doesn't create any space, it simply apply an algorithm considering the existing spaces in your code. If you understand the algorithm, you underdstand everything (follow the links I posted for full details) – Temani Afif Oct 22 '20 at 23:02
But i am not talking about the space between the two pairs of elements. Right now i am talking about the space between div1 and div2. There is no line-break between them. Yes i noticed that i had accidentally added spaces between the text, but i removed them and now they are all in one line. Right now i am only talking about the inline-elements, not the inline-block BELOW them. I am only referring to the first two class=div1 and class=div2.
Lorem ipsum

Lorem ipsum
this is my code right now. – happy_story Oct 22 '20 at 23:05
*Right now i am talking about the space between div1 and div2.* --> you have line breaks in the code between those div. It's clear that they are at the top of each other in the code because you pressed the Enter key. I am not refering to the
element which is another story. What you need to understand is that using your keyboard you can add space, tabulation, line break, and many invisible characters that create spaces in your code. I insist on the *in your code* part. The visual is another story and there is a whole algorithm that apply to your code that will render the *visual* spaces. – Temani Afif Oct 22 '20 at 23:11
So, considering ONLY the div1 and div2, could you try to explain what creates that 4px space between them? What space in my code creates that character space between the two elements? Even if i have no spaces inside my two elements (div1 and div2 NOT div3 and div4), there is still 4px character space between them. What causes that space, and why does it get filled with backgrouund-color when i add one extra space after the first text of div1, and why is that not happening with inline-block? – happy_story Oct 22 '20 at 23:11
@Ihatecontrolfreaks I cannot explain more than what I already done in my answer and in the comments ... – Temani Afif Oct 22 '20 at 23:12
So you're saying that in my code, the line-break that pushed the div2 down below the first code had created a space, and that space gets collapsed with.. what space? .. and produces what? I think we talk about different things and that's why we keep not understanding each other. I also think it's necessary to be more specific about the terms you are using. I think i have to re-read your answer again tomorrow with fresh mind, and i hope i can understand it then. I will comment again if i need clarification for something. Thank you as always for the help. – happy_story Oct 22 '20 at 23:17
Hey. So, i re-read your answer, and i think i understand everything now with the exception of one thing - why do inside spaces of inline-block get trimmed, but they don't get trimmed for inline-elements? It has to do with the fact that, inline-block creates block formatting context inside, whilst inline-elements have inline-formatting context inside, but do you have a more specific explanation? – happy_story Oct 23 '20 at 11:29
1

@Ihatecontrolfreaks as I hightlighted in the answer, inline-block is an atomic inline-level box so its content isn't a part of the inline formatting context where the inline-block belong. It's an opaque box inside an inline fomatting context. Check this for more details: https://stackoverflow.com/a/28537664/8620333 – Temani Afif Oct 23 '20 at 12:35

Why does the extra space between two inline-elements get filled with background-color, but it doesn't for the space between two inline-block elements?

1 Answers1