jfs.world (117) [Avatar] Offline
hi, I'm not so sure that setting letter-spacing and word-spacing to "-0.4em" is the answer to the problem raised ("You can see that despite the margin being set to zero there is still a gap between the elements on each row.").

1. Are you sure that every browser will be using 0.4em as the spacing? is this the standard?

2. You should be using html properly, instead of using something like negative spacing. The fact is that when u introduce a space (including a "
") in the source html between inline elements, the browser necessarily inserts a gap between them. So dont insert the space!

<section>blah this is inline-block</section><aside>this too</aside>

Instead of:

<section>blah this is inline-block</section>
<aside>this too</aside>
robert.crowther (59) [Avatar] Offline
Re: 8.1.1 (version 10 pdf page 263, book page 260): "-0.4em" the answer?

Hi jfs.world, thanks for the feedback.

1. Setting it to -0.4em worked OK in all the browsers I tested. I agree it's not perfect, but then layout with CSS won't be perfect anyway until we get wide support for flexboxes and grid layouts. At that point the need to do any layout with inline-block will mostly disappear.

2. In this situation the HTML white space handling rules are an inconvenient obstacle, I don't think making the markup less readable is a good solution either.

If you're interested there's a good summary in this CSS-Tricks blog post: Fighting the Space Between Inline Block Elements.


jfs.world (117) [Avatar] Offline
Re: 8.1.1 (version 10 pdf page 263, book page 260): "-0.4em" the answer?
thanks, Robert

1. Perhaps... but I would at least have preferred the font size 0 solution.

2. ah well, HTML is what it is... We are fixing it as per HTML! (This is the "perfect" solution?) Who edits raw html nowadays, anyway? I'm expecting most of us probably deal with a templating language (haml, erb, etc.)... than with raw html. We can drop down to it... but we have other solutions as well.

Thanks for the link to css-tricks. Good to find out about the font size 0 solution!