My html/css document has ghost margins or padding?

Question

Have a look at the JS fiddle above. There are some ghost margins that I can't get rid of and I don't understand why they're there??

I have tried Margin: 0; but it isnt working?

<help></help>

Any help?

Tom

Here the reason - https://css-tricks.com/fighting-the-space-between-inline-block-elements/ — Luís P. A., Jul 23 '15 at 15:59
Hi. Just FYI, some people have downvoted your question, and it could be simply because there is not enough info in your question. For instance, Stack Overflow people generally want you to put your relevant code in the question rather than only providing a jsfiddle link. — Joseph Hansen, Jul 23 '15 at 16:00
Also, are you referring to the margins around the gray boxes on jsfiddle? — Joseph Hansen, Jul 23 '15 at 16:01

Bmd · Answer 1 · 2015-07-23T18:02:58.873

You have a few issues that are causing you trouble.

Your anchors are inline elements and therefore respect whitespace (line breaks and spaces) between tags. You could comment between every tag (See https://css-tricks.com/fighting-the-space-between-inline-block-elements/), but that's a lot of extra markup and is more of a hack than a solution.

I recommend setting your anchors to display as inline-block so they'll handle margins and padding in the way you would expect them to, and then float them left so they all stack neatly against each other.

By setting your images to max-width:25%, you're drawing them at 1/4 width, but they still reserve 100% of their width (sort of like how position:relative affects blocks) which causes the anchor tags to draw at 500px wide.

To solve this, I moved the max-width:25% style from the img declaration to the a declaration. That left me with 500px wide images overlapping each other, but then I solved that by adding the max-width:100% style to the img declaration.

I couldn't tell you why this is, but I've learned from trying to butt images up against other blocks that by default, images reserve ~3-5px beneath them as part of their height property. To get around this, you can add display:block to your img styles. This causes the image to only reserve the exact width and height the image is drawn at, and because it's wrapped in an inline-block element, it will still stack nicely.

.

.content a {
    display:inline-block;
    margin:0;
    max-width:25%;
    float:left;
}
.content img {
    display:block;
    max-width:100%;
    margin: 0;
    padding: 0;
}

https://jsfiddle.net/2psu0gs4/5/

score 0 · Answer 2 · answered Jul 23 '15 at 16:49

To get rid of the horizontal invisible margins use float. The vertical margin on the other hand is not a margin, it's space of the element that was not filled by the image (since the image will try to maintain its aspect ratio), if you want to get rid of it you could stretch the image to fill in the gap.

Taking your fiddle as a base, try this:

.content img {
    width:100%;
    height:100%;
}

.content a {
    width:25%;
    height: 100px;
    float: left;
}

http://jsfiddle.net/2psu0gs4/6/

score -1 · Answer 3 · answered Jul 23 '15 at 16:09

-1

The spaces and line breaks between your divs in the html markup are responsible for the space between them in display. You have to remove those spaces or simply add html comments  like here.

edit by the way - your markup is not valid. The <li> items must be used as direct child of the <ul> - I updated my fiddle accordingly.

answered Jul 23 '15 at 16:09

dhh

4,289
8
42
59

Your answer about the margins is simply the wrong answer. See this answer http://stackoverflow.com/a/2628137/4206282 . The tags (like the tags in that answer) are inline elements, and while you can eliminate the whitespace between them horizontally by removing the line break in the markup, WhatYou'reReallyDoingIsEssentiallyThis, which doesn't solve the problem. – Bmd Jul 23 '15 at 16:40
1
You are correct about the
– Bmd Jul 23 '15 at 16:40

My html/css document has ghost margins or padding?

3 Answers3