CODEWITHSUNDEEP
htmlcss
Daniel Robinson
Daniel Robinson

Reputation: 14898

html/css, how to make element padding not cover over previous elements?

I have written a jsfiddle of the issue. I want the span with the padding to be pushed further down so it does not obscure the one above it. It currently appears that the layout only takes into account the content text size and ignores the padding. I would like to be able to achieve this with a generic css rule that works regardless of what padding values the overlapping span has, if that is possible.

html:

<span class='outer'>
    <span class='inner'>
        <span class='content'>Hello</span>
    </span>
    <span class='inner'>
        <span class='content'>
            <span id='pad-me-out'>
                World
            </span>
        </span>
    </span>
</span>

css:

.outer > .inner{
    clear:left;
    float:left;
}

#pad-me-out{
    background: #999;
    padding:7px 14px;
}

Upvotes: 4

Views: 3148

Answers (2)

Imran Bughio
Imran Bughio

Reputation: 4941

Solution: Add the following in your css.

#pad-me-out{ display:inline-block; }

Logic/Description: Span tag is an inline element & inline elements simply ignore padding hence we should define a display property which does support padding & closet to inline is inline-block.

Upvotes: 0

Tim B James
Tim B James

Reputation: 20374

Add display: inline-block to #pad-me-out

so;

#pad-me-out{
    background: #999;
    padding:7px 14px;
    display: inline-block;
}

Updated to inline-block as suggested by @tomaroo however this might not work in older browsers.

Upvotes: 4

Related Questions