Mystery negative margin on display:inline-block elements

Question

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.

Answer 1

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:

1. Remove the whitespace between initial posts:

   $('div.post').detach().appendTo('#posts');
   

   on page ready/load, which emulates what the Infinite Scroll plugin is doing.

2. Remove margin-right: -4px; from .post_margin_adjustment.

The gap between initial and new posts should now both be 8px wide.

Answer 2

First, this SO Answer is a complement to the SO Answer provided by Zuul on this page. I could not EDIT his answer or the PEER REVIEW process did not work for whatever reason.

Credible and/or official sources has been provided for the SO Question.

Reference: "It can't be that computed style according to the inspector is saying one thing but visually it's doing another?"

In this case Firefox has a 3D Viewer for CSS built in. It shows revealing information that the images are loaded correctly but the margin-right is creating the issue. Let me illustrate this via captured images for your Gold Helmet photo.

This first image shows the loaded image in it's own container via the dotted-lines. Notice however that the image itself extends outside dotted-lines on the right side:

This second image is a close-up using Firefox 3D Viewer. Here you can see the original container is placed on the page correctly via the bottom level of blue shown. This shows that the onload process has respected the correct CSS distance to the image on the right. Although the text at the upper right is blurry, there is a checkmark for margin-right in use of -4px:

This final photo has the checkmark for margin-right removed. Notice that the photo is now presented correctly:

The above can be duplicated using Firefox when using the 3D Viewer for CSS.

NEW: You can right click each image and choose view image to see larger version.

Answer 3

If I've got the problem right, by analyzing the page with FF12.0 using Firebug, I see:

.post_margin_adjustment {
    margin-right: -4px;
}

And that is pulling the left posts to the right side, thus causing the layout to be disrespectful towards your:

.index .post {                                         /* syndex.me (line 469) */
  margin: 4px;
}

Removing the negative margin, seems to solve the issue.

---

Note:

You are talking about margin:2px, but what I see on the current css is margin:4px;, so, the total between posts is 8px if fixed the issue of the negative margin.

Just used the "ruler" from the "web developer 1.1.9" and it gives me 8px when the negative margin is disabled!

---

One last thing that is also messing up the margin declaration is:

.index .post {                                          /* syndex.css (line 1) */
  line-height: 0;
}

This declaration is causing the images to get pulled up, thus reducing the space between posts on the top/bottom.

Disabling this fixes the top/bottom spacing, allowing it to be properly presented by having the margin:4px.