Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS Trouble with responsive box spacing Reply To: Trouble with responsive box spacing

#156554
Merri
Participant

Inline-blocks are like block elements, but don’t automatically consume 100% of width and instead depend on their content’s width requirement unless width is explicitly set.

You can think inline-blocks like a single character or a word. They wrap like text does. Thus if you just throw three inline-blocks next to each other the end result is like regular text. With a samples:

[WORD][SPACE][WORD][SPACE][WORD][EMPTY SPACE OF REST OF THE LINE]

That’s like your regular text line. So inline-block would be similar to that, just replace WORD with INLINE-BLOCK and you’re good to go.

What text justifying does is to expand the space between words so that the whole available line is consumed. The space between words (or inline-blocks) is evenly distributed on the line. And this is how you can have three inline-blocks that have no definition for the space between them and still have that space evenly distributed. This effect is very dynamic so you can add more elements and see them going to the next row, then shrink 30% to something smaller and then the result is again one row where space between all the elements is evenly distributed. Just like it would do with text.

There is just one downside with justifying: the last line of text is not justified by default and instead regular alignment is being used. This is why there is the :after element trick that adds a zero height empty inline-block that is the width of the container.

Is this complete enough or too confusing? If you can wrap your head around the thought of how text flows on a page then this should be simple enough.