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".
Have a look at this HTML and CSS:
1 | <!DOCTYPE HTML> |
Here is what this looks like:
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:
Erm - not actually what was expected, right?
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:
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.
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:
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.
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.
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:
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:
Hm, that space will stay significant for quite a time ...
ɔ⃝ Fritz Ritzberger, 2016-01-19