Mystery negative margin on display:inline-block elements
css, html
Solution
When the page first loads, there is whitespace in the HTML between each `<div class="post">`. Each chunk of whitespace is rendered as one space character (usually 4px wide). `<div class="post_margin_adjustment">` counteracts this with its `margin-right: -4px`, so the gap between the initial posts is 8px:
4px (margin-right from the left post)
+ 4px (space character)
- 4px (negative margin-right from left post_margin_adjustment)
+ 4px (margin-left from the right post)
= 8px
When the Infinite Scroll plugin loads the next page, it grabs the new `div.post` elements and inserts them into the page, without the whitespace. So the gap between the new posts is 4px:
4px (margin-right from the left post)
- 4px (negative margin-right from left post_margin_adjustment)
+ 4px (margin-left from the right post)
= 4px
This is why the gap between new posts is narrower than the gap between the initial posts.
To fix this, I would:
Remove the whitespace between initial posts:
$('div.post').detach().appendTo('#posts');
on page ready/load, which emulates what the Infinite Scroll plugin is doing.
Remove `margin-right: -4px;` from `.post_margin_adjustment`.
The gap between initial and new posts should now both be 8px wide.
Problem
I'm really floored as to why this is happening. The posts on http://syndex.me have a margin of 2px. When the page initially loads, this is adhered to. When the second batch of posts loads (14 posts down it kicks in) You'll see that for some bizarre reason, the posts to the right are actually 2px shorter than they should be. Weirder still, inspecting the posts shows that they are in fact set with a `margin:2px` And even more weirdness, this only happens on the left or right margins, but not the top and bottom (?!) Having done front end for quite a while, I'm pretty confident this is a strange case. I'm getting this rendering issue on firefox, safari and chrome. If I roll over the posts using the inspector, I can see that each post does indeed have a 2px margin, it's just that the margin of the second post (to the right) starts as if the post alongside it had a zero margin, but it positively does have one too. It's as though the posts are ignoring their neighbours left and right margins? One thing, the posts are using `display:inline-block`. What i don't understand is: why does the behaviour only kick in after lazy-load? and I know that inline elements have a natural space of 2 to 4 px, but this is ignoring 2px, seems weird. I don't know where to start looking on this one, any help would be appreciated.