Inline div block with border and padding causes the div to go out of page margin

Question

How can I prevent the top edge from being cut off in this code: http://jsfiddle.net/ebW6F/?

HTML code:

<div id="text">
    abcd efgh
</div>

CSS code:

#text {
    display: inline;
    border: 3px solid black;
    padding: 10px;
    font-size: 40px;
}

score 3 · Answer 1 · edited Jul 01 '13 at 20:05

3

Here is one way to do that:

#text {
    display: inline-block;
    border: 3px solid black;
    padding: 10px;
    font-size: 40px;
}

edited Jul 01 '13 at 20:05

Hemerson Varela

answered Jul 01 '13 at 19:30

p e p

1

And for some old browsers *display: inline; zoom:1 – Idrizi.A Jul 01 '13 at 19:33
@Enve Nice one - I did not know this. Enve is referring, I assume, to this or something similar: http://stackoverflow.com/questions/5838454/inline-block-doesnt-work-in-internet-explorer-7-6/5838575#5838575 – p e p Jul 01 '13 at 19:50

score 0 · Answer 2 · answered Jul 01 '13 at 19:31

0

Since you appear to be creating a box of some kind, use display:inline-block instead of just display:inline.

answered Jul 01 '13 at 19:31

theftprevention

2 Answers2