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

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.