CODEWITHSUNDEEP
marginhtmlcss
Jack
Jack

Reputation: 1911

Empty span causes weird margin / padding

When I place a fixed size display-block <span> element inside a <div> it causes a weird margin or padding (I don't know) at the bottom of the <div>. When there is text inside the <span> element, everything is fine. What's the reason for this? How can I fix it? I tested on Firfox and Chrome.

Weird space http://picster.at/img/0/9/6/0968c75ddf29ad07cb71eee2cff472a9.png

<!DOCTYPE html>
<html>

<head>
    <style type="text/css">
    <!--
    .outer {
        background: grey;
        padding: 4px;
    }
    .inner {
        display: inline-block;
        background: cyan;
        height: 40px;
        width: 40px;
    }
    -->
    </style>
</head>

<body>
    <div class="outer">
        <span class="inner">Foo</span>
    </div>

    <br>

    <div class="outer">
        <span class="inner"></span>
    </div>
</body>

</html>

Update:

Floating would be an alternative to display-block elements. Perfectly valid, however I would like to understand what's wrong with display-block in this example. Also, it doesn't look like a white-space problem to me, as this would only affect margin to the left/right (correct me if I'm wrong).

Upvotes: 1

Views: 3341

Answers (4)

Waltur Buerk
Waltur Buerk

Reputation: 1368

It can be solved by setting the "line-height" of the outer element to 0. This solves pretty much every case.

Don't forget to make sure the inner element doesn't inherit that though, to do this you can just set it to "line-height:initial".

.outer {
        background: grey;
        padding: 4px;
        line-height:0;
    }
    .inner {
        display: inline-block;
        background: cyan;
        height: 40px;
        width: 40px;
        line-height:initial;
    }

Upvotes: 1

Rajender Joshi
Rajender Joshi

Reputation: 4205

This hack works great for me.

Demo

.inner:after{
        content: '\00a0';
}

Upvotes: 6

aleation
aleation

Reputation: 4844

inline-block is messing it up

If your intention of setting it as inline-block was to set a row of .inner's, set change the inner to block, and float left.

Then use a div with clear: both to fix the issue that normally the floating causes.

Here's your code modified:

<head>
    <style type="text/css">
    <!--
    .outer {
        background: grey;
        padding: 4px;
    }
    .inner {
        display: block;
        background: cyan;
        height: 40px;
        width: 40px;
        float: left;
        margin-right: 4px;
    }
    .clear{
        clear:both;
    }
    -->
    </style>
</head>

<body>
    <div class="outer">
        <span class="inner">Foo</span>
        <div class="clear"></div>
    </div>

    <br>

    <div class="outer">
        <span class="inner"></span>
        <span class="inner"></span>
        <div class="clear"></div>
    </div>
</body>

</html>

Upvotes: 1

Mr. Alien
Mr. Alien

Reputation: 157364

It is because you are using inline-block;, this is the best example of how inline-block is different from floats

Demo

.outer {
    background: grey;
    padding: 4px;
    overflow: hidden;
}

.inner {
    float: left;
    background: cyan;
    height: 40px;
    width: 40px;
}

inline-block leaves whitespace of 4px margin.

More Info

Upvotes: 4

Related Questions