Interesting CSS behaviour
Why does the block move down when you add text inside of it?
https://jsfiddle.net/ausfL42w/1/
Edit fiddle - JSFiddle - Code Playground
Test your JavaScript, CSS, HTML or CoffeeScript online with JSFiddle code editor.
19 Replies
Unknown User•3y ago
Message Not Public
Sign In & Join Server To View
As an attribute?
Unknown User•3y ago
Message Not Public
Sign In & Join Server To View
Edit fiddle - JSFiddle - Code Playground
Test your JavaScript, CSS, HTML or CoffeeScript online with JSFiddle code editor.
because those are inline blocks. text is pushing all down to the baseline
What does that mean? "Text is pushing all down to the baseline"
Unknown User•3y ago
Message Not Public
Sign In & Join Server To View
you have to imagine inline is like text in a paragraph. it goes from left to right, and when no space goes to the following line. the text is positioned to those lines (no matter if there is a box around)
Ah okay
make your .row { display: flex }
you dont need the inline blocks
Ah yeah, I just found this code from someone else, I was just interested to understand how it worded "behind the scenes"
Not my actual code
Unknown User•3y ago
Message Not Public
Sign In & Join Server To View
that or non-breaking spaces in each empty div
if you inspect element with two of the blocks pulled down, you can kinda see what's going on
there's one line-block (effectively a line of text, nothing to do with the inline-block display value really), that has the inline-block divs on it, and the spaces between those divs in the code as well (which is why there's a small gap between each div)
when the div is empty, its baseline used for aligning inline-block elements is at the bottom of the div's block. Once you put text inside, the baseline moves to the baseline of that text, because suddenly the inline-block div has a text line-block inside of it that needs to be aligned to the line-block outside of the divs
when you mouse over a filled div, then the whitespace between, and then an empty div in the devtools, you can see that the text inside aligns with the whitespace between the divs, and the bottom of the empty div aligns with the bottom of that whitespace
as for why this doesn't work: You're supposed to put
in each of the empty divs, to create that line-block inside it. A regular space doesn't work because it gets trimmed awayUnknown User•3y ago
Message Not Public
Sign In & Join Server To View
that's just firefox
Unknown User•3y ago
Message Not Public
Sign In & Join Server To View
Thanks for the detailed response! 🙂 @jochemm