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:
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?
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:
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:
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:
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 ...
Keine Kommentare:
Kommentar veröffentlichen