Cannot remove extra margin/padding between divs even though reset.css used

Question

I've been trying everything i know for the past 1.5 hours and cannot figure this one out. Actually far as i can tell, margin and padding are at 0, however, the containing divs are so far, inexplicably 4px wider and 1px taller then the containing image. I don't know where that comes from.

Few things which may be causing this:

1. I'm setting the max-width and max-height of the images via javascript to the size of the window.
2. I'm working with a combination of table, table-cell and inline-blocks to set typography in the way i need it.
3. Also working with body and html at 100% width and height
4. This is a Tumblr theme customisation (started from scratch though)

Code wise, it's hard to put the entire lot in here, so for now, I'll just give the link.

Hopefully if this can be figured out I'll be able to post the problem code in this question so it's good for reference in the future.

The link: http://syndex.me

Thanks

Answer 1

In this case, i could not use float:left as there seems to be no reliable way to achieve center aligned series of divs using it. The answer is pretty simple, any mark-up within the inline-blocked, center aligned wrapper/child sequence needs to have no white space in between them, and should be wrapped in one continuous line of code. Pretty stupid, but it works 100% for this scenario.

Answer 2

You have spaces between the divs because you use display: inline-block and the divs are separated by white space. It's just like you'd be writing letters on different lines: they'll appear with one white space between them. The vertical white-space happens because of the same reason - images are displayed as inline and the browser reserves some space for the line-height. The solution is to use display: block and float: left for the divs and display: block for the images.

Answer 3

You mean on this guy?

.post.photo {
  display: inline-block;
  position: relative;
  height: 100%;
}

You're likely not looking at margin, you're looking at textual whitespace. Since that div is being positioned as inline-block it's acting like an inline element, say, a word or a <strong> tag. If you remove the space between your starting/closing <div> tags, your "margin" will magically disappear.

If you're using inline-block for positioning, line-height: 0 and font-size: 0 are your best friends; they close up any effective whitespace, though they're very ugly hack. Floats are a better solution in most cases.

See #column_content and #column right on The Fashion Spot to see inline-block columns in use.