Space in HTML Breaks Layout


Published: 2016-01-19
Updated: 2018-01-14
Web: https://fritzthecat-blog.blogspot.com/2016/01/space-in-html-causes-layout-break.html


Some things are hard to understand. Actually they can't be understood, they can just be learnt and accepted. Like von Neumann said: "In mathematics you don't understand things. You just get used to them".

CSS display: inline-block

Have a look at this HTML and CSS:

 1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1"/>

<style type="text/css">
.inline-block {
display: inline-block;
}
</style>

</head>

<body>

<div style="background-color: SkyBlue; height: 10em; padding: 1em;">

<div class="inline-block" style="background-color: yellow;">
Box 1
</div>

<div class="inline-block" style="background-color: orange;">
Box 2
</div>

</div>

</body>
</html>

Here is what this looks like:

Box 1
Box 2

This is how display: inline-block is documented to work: it arranges elements horizontally.

But not always. Lets add a little more text to the boxes.

  <div style="background-color: SkyBlue; height: 10em; padding: 1em;">

<div class="inline-block" style="background-color: yellow;">
Lorem ipsum dolor sit amet, qui meliore deserunt at. Percipitur intellegam appellantur cu vim, mei soluta complectitur id, partem reprimique ullamcorper in vim. Eam an porro accusamus dissentiunt, te sit impedit tacimates, movet laboramus mea ad.
</div>

<div class="inline-block" style="background-color: orange;">
Lorem ipsum dolor sit amet, qui meliore deserunt at. Percipitur intellegam appellantur cu vim, mei soluta complectitur id, partem reprimique ullamcorper in vim. Eam an porro accusamus dissentiunt, te sit impedit tacimates, movet laboramus mea ad.
</div>

</div>

This looks like the following now:

Lorem ipsum dolor sit amet, qui meliore deserunt at. Percipitur intellegam appellantur cu vim, mei soluta complectitur id, partem reprimique ullamcorper in vim. Eam an porro accusamus dissentiunt, te sit impedit tacimates, movet laboramus mea ad.
Lorem ipsum dolor sit amet, qui meliore deserunt at. Percipitur intellegam appellantur cu vim, mei soluta complectitur id, partem reprimique ullamcorper in vim. Eam an porro accusamus dissentiunt, te sit impedit tacimates, movet laboramus mea ad.

Erm - not actually what was expected, right?

Add Width

We learn that we need to give these boxes a width. And as it is hard to define an exact width for text contents, we define a percentage width.

  <style type="text/css">
.inline-block {
display: inline-block;
width: 50%;
}
</style>

Now it looks like this:

Lorem ipsum dolor sit amet, qui meliore deserunt at. Percipitur intellegam appellantur cu vim, mei soluta complectitur id, partem reprimique ullamcorper in vim. Eam an porro accusamus dissentiunt, te sit impedit tacimates, movet laboramus mea ad.
Lorem ipsum dolor sit amet, qui meliore deserunt at. Percipitur intellegam appellantur cu vim, mei soluta complectitur id, partem reprimique ullamcorper in vim. Eam an porro accusamus dissentiunt, te sit impedit tacimates, movet laboramus mea ad.

Not much changed - Hrm?
This is the point where you look for stackoverflow. And you learn the lesson you have to get used to:

white-space between the two <div> elements is "significant"

That means it is physically rendered, and is the reason why 2 * 50% do not fit into the container. You can't see it, but it is there.

Remove Spaces

What we probably hardly will get used to is that there is no CSS fix for this. You need to either do some very noisy workarounds affecting the parent element and its font-size, or you need to simply remove the spaces between the <div> elements in HTML!

  <div style="background-color: SkyBlue; height: 10em; padding: 1em;">

<div class="inline-block" style="background-color: yellow;">
Lorem ipsum dolor sit amet, qui meliore deserunt at. Percipitur intellegam appellantur cu vim, mei soluta complectitur id, partem reprimique ullamcorper in vim. Eam an porro accusamus dissentiunt, te sit impedit tacimates, movet laboramus mea ad.
</div><div class="inline-block" style="background-color: orange;">
Lorem ipsum dolor sit amet, qui meliore deserunt at. Percipitur intellegam appellantur cu vim, mei soluta complectitur id, partem reprimique ullamcorper in vim. Eam an porro accusamus dissentiunt, te sit impedit tacimates, movet laboramus mea ad.
</div>

</div>

Ugly HTML, but works:

Lorem ipsum dolor sit amet, qui meliore deserunt at. Percipitur intellegam appellantur cu vim, mei soluta complectitur id, partem reprimique ullamcorper in vim. Eam an porro accusamus dissentiunt, te sit impedit tacimates, movet laboramus mea ad.
Lorem ipsum dolor sit amet, qui meliore deserunt at. Percipitur intellegam appellantur cu vim, mei soluta complectitur id, partem reprimique ullamcorper in vim. Eam an porro accusamus dissentiunt, te sit impedit tacimates, movet laboramus mea ad.

That's what we expected.

Until the new developer goes over that unreadable code and formats it :-(moment to think about sustainability)-:

Yes, we need to document that this is a necessary workaround for the inline-block space problem!
And as we are commenting now, maybe there is a better way to remove the space, couldn't we comment it out?

  <div style="background-color: SkyBlue; height: 10em; padding: 1em;">

<div class="inline-block" style="background-color: yellow;">
Lorem ipsum dolor sit amet, qui meliore deserunt at. Percipitur intellegam appellantur cu vim, mei soluta complectitur id, partem reprimique ullamcorper in vim. Eam an porro accusamus dissentiunt, te sit impedit tacimates, movet laboramus mea ad.
</div><!--
Do not remove this workaround for the inline-block space problem.
--><div class="inline-block" style="background-color: orange;">
Lorem ipsum dolor sit amet, qui meliore deserunt at. Percipitur intellegam appellantur cu vim, mei soluta complectitur id, partem reprimique ullamcorper in vim. Eam an porro accusamus dissentiunt, te sit impedit tacimates, movet laboramus mea ad.
</div>

</div>

This looks much better, and is documented seriously.

Use box-sizing: border-box, avoid margin

This journey could be continued with border, padding and margin, all of these will also break the layout. For borders and paddings you could help yourself with box-sizing: border-box, but for margins everything is in vain, best you avoid it.

Vertical Align

But let's also learn the last inline-block lesson. We make the text in the right box a little shorter, and see what happens then.

  <div style="background-color: SkyBlue; height: 10em; padding: 1em;">

<div class="inline-block" style="background-color: yellow;">
Lorem ipsum dolor sit amet, qui meliore deserunt at. Percipitur intellegam appellantur cu vim, mei soluta complectitur id, partem reprimique ullamcorper in vim. Eam an porro accusamus dissentiunt, te sit impedit tacimates, movet laboramus mea ad.
</div><!--
Do not remove this workaround for the inline-block space problem.
--><div class="inline-block" style="background-color: orange;">
Lorem ipsum dolor sit amet, qui meliore deserunt at.
</div>

</div>

Here is what this looks like:

Lorem ipsum dolor sit amet, qui meliore deserunt at. Percipitur intellegam appellantur cu vim, mei soluta complectitur id, partem reprimique ullamcorper in vim. Eam an porro accusamus dissentiunt, te sit impedit tacimates, movet laboramus mea ad.
Lorem ipsum dolor sit amet, qui meliore deserunt at.

Erm - no, not what was expected.
But for this we have some CSS. It needs vertical-align: top.
Here is the final CSS for display: inline-block elements.

  <style type="text/css">
.inline-block {
display: inline-block;
width: 50%;
vertical-align: top;
}
</style>

This looks good now:

Lorem ipsum dolor sit amet, qui meliore deserunt at. Percipitur intellegam appellantur cu vim, mei soluta complectitur id, partem reprimique ullamcorper in vim. Eam an porro accusamus dissentiunt, te sit impedit tacimates, movet laboramus mea ad.
Lorem ipsum dolor sit amet, qui meliore deserunt at.

Hm, that space will stay significant for quite a time ...





ɔ⃝ Fritz Ritzberger, 2016-01-19