2

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

Robert Harvey
  • 178,213
  • 47
  • 333
  • 501
RGBK
  • 2,048
  • 5
  • 35
  • 55
  • 3
    It might be worth noting in your question that the pictures on your site *may not be safe for people to browse at work*. I'd like to help you but I can't have that sitting on my screen in the office. **[EDIT: To clarify, it's not 'porn', but there is a large image of a basically nude woman]** – mal-wan Oct 13 '11 at 21:45
  • 1
    glad I read your comment @mwan, not that anyone cares here, but it would still be really awkward. – Patrick Lee Scott Oct 13 '11 at 21:46
  • 1
    Sorry guys. Hmmm, rather not delete it though :-) Yeah it's not porn but it's racy. – RGBK Oct 13 '11 at 22:10

3 Answers3

11

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.

Paul Sweeney
  • 322
  • 3
  • 7
  • I really thought that would do the trick. Damn. Those spaces are still there. But it makes sense what you say. I even placed those css values in html, body {} and still no luck. I was looking at that property white-space, but there's no option for 'none'. – RGBK Oct 13 '11 at 22:09
  • You can always use this trick:
    ..
     – Paul Sweeney Oct 14 '11 at 20:58
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.

deviousdodo
  • 9,177
  • 2
  • 29
  • 34
  • Cheers, but wouldnt this ruin the centre alignment i have going on? – RGBK Oct 13 '11 at 22:11
  • Would do, but you can still center floats. Here's an example: http://jsfiddle.net/XeX8x/ – deviousdodo Oct 13 '11 at 22:39
  • That works so long as the the entire amount of divs dont go over one line. soon as the line breaks, it goes back to floating left. http://jsfiddle.net/XeX8x/9/ Intersting. Furthermore, on my site, when it loads the first image, it's centred, but soon as the other images load in it click back to the left. I'm guessing it's because it breaks the notion of left and right somehow? – RGBK Oct 13 '11 at 22:59
  • You're right, didn't test multiple lines. I cannot think of anything else right now, except the dirty way of stripping the whitespace with JS. You can see an example here: http://stackoverflow.com/questions/1539367/remove-whitespace-and-line-breaks-between-html-elements-using-jquery – deviousdodo Oct 13 '11 at 23:29
  • i just stripped it manually. It works now. Although there is still one 1px vertical space which comes from another wrapped div (revealed onclick) I'm sure I'll figure that one out. Thanks for your help Draevor! – RGBK Oct 14 '11 at 00:21
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.

RGBK
  • 2,048
  • 5
  • 35
  • 55