“A” tag, inline-block and negative margins

Question

Consider this simple example.

HTML

<div>
    <a href="/">Some link here</a>
    <div>a div here</div>
    <a href="/">Another link</a>
    <br/>
    <a href="/">And one more!</a>
</div>

CSS

div > a, div > div {
    color: white;
    line-height: 1.6;
    height: 30px;
    text-align: center;
    width: 150px;
}
div > a {
    border: 1px solid black;
    display: inline-block;
    text-decoration: none;
}
div >  a:first-child {
    background-color: red;
    margin-bottom: -8px;
}
div > div + a {
    background-color: green;
    margin-bottom: -8px;
}
div > br + a {
    background-color: blue;
}
div > div {
    background-color:black;
    border: 1px solid gray:
    margin-bottom:-8px;
}

Fiddle here http://jsfiddle.net/rHupy/2/

This issue relates to latest Chrome and Firefox.

I've lost my whole afternoon yesterday fiddling with this. Basically, in this example the negative bottom margin acts very strangely. If you use the negative margin on the red A tag, it will draw in the DIV tag, but up to 8px. If you go below -8px (a more negative value, that is) the DIV tag stays put, it's not drawn more into the red A tag.

Applying the margin to the DIV tag works as expected, that is you can make the green A tag completely cover the DIV tag with -25px.

I'm quite certain this is related to the inline-block display style, because if I apply the block display style to all tags and omit the BR tags this problem is circumvented, but more arise. Example here http://jsfiddle.net/rHupy/3/

I have also tried combining the block display style with float left style, but that gave me more problems; some elements would just collapse, instead of aligning one to another.

My question is: why is the negative margin applied on A tag with inline-block display style set "limited" to some value?

I'm a bit confused. Can you sum up in one sentence what you need? The second fiddle looks like what you want to me... — Cedric Reichenbach
As a side note: try clicking on a link in the jsfiddle to obtain a 'fiddleption'. — Francisco Presencia
@CedricReichenbach read the last paragraph, you confusion should disperse after doing so. — mkey
@FrankPresenciaFandos I don't understand what you're saying there, mate. — mkey
Sorry, it was a mistranslated joke from Spanish, I just wanted to point out that it creates a new window inside the same window, and you can modify this easily to go deeper, as in the movie Inception. — Francisco Presencia

mkey mkey · Accepted Answer · 2013-05-02T16:59:59

OK, I played some more with it and here are the results.

The initial doctype produced this.

HTML

<!DOCTYPE html>

doctype 1 results

Changing the doctype gives entirely different results, with exactly the same CSS and HTML.

HTML

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

doctype 2 results

Here's the final HTML

HTML

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
    <head>
        <title>Test</title>
        <style type="text/css">
            div > a {
                background-color:green;
                border:1px solid red;
                display:inline-block;
                height:20px;
                margin-bottom:-15px;
                margin-right:11px;
                width:23px;
            }

            div > a + a + a + a + a + a + a + a + a + a + a + a + a + a + a + br + a {
                margin-left:17px;
            }
        </style>
    </head>
    <body>
        <div>
            <a href="/"></a><a href="/"></a><a href="/"></a><a href="/"></a><a href="/"></a><a href="/"></a><a href="/"></a><a href="/"></a><a href="/"></a><a href="/"></a><a href="/"></a><a href="/"></a><a href="/"></a><a href="/"></a><a href="/"></a>
            <br/>
            <a href="/"></a><a href="/"></a><a href="/"></a><a href="/"></a><a href="/"></a><a href="/"></a><a href="/"></a><a href="/"></a><a href="/"></a><a href="/"></a><a href="/"></a><a href="/"></a><a href="/"></a><a href="/"></a>
            <br/>
            <a href="/"></a><a href="/"></a><a href="/"></a><a href="/"></a><a href="/"></a><a href="/"></a><a href="/"></a><a href="/"></a><a href="/"></a><a href="/"></a><a href="/"></a><a href="/"></a><a href="/"></a><a href="/"></a><a href="/"></a>
            <br/>
            <a href="/"></a><a href="/"></a><a href="/"></a><a href="/"></a><a href="/"></a><a href="/"></a><a href="/"></a><a href="/"></a><a href="/"></a><a href="/"></a><a href="/"></a><a href="/"></a><a href="/"></a><a href="/"></a>
            <br/>
        </div>
    </body>
</html>

Lets say that this solves my problem, even though I don't understand all the consequences of making this change.

“A” tag, inline-block and negative margins

1 Answers