Why does break outside when margin and padding is applied?

Question

I know this is very basic CSS. How do I keep the span contained within the div? At the moment, the span extends outside the top and bottom of the div.

相关标签:

Answer 1

The vertical padding, border and margin of an inline, non-replaced box (e.g. span) start at the top and bottom of the content area, and has nothing to do with the 'line-height'. But only the 'line-height' is used when calculating the height of the line box. Therefore you see an overlapping here: http://jsfiddle.net/Q9AED/

If you want to use a straightforward solution, you can use line-height rather than display: inline-block: using line-height.

display: inline-block works in Safari >= 2, Opera >= 9, IE >= 8, Firefox > 3. But you can imitate an inline-block in IE < 8: display: inline; zoom: 1.

Answer 2

To answer your question, this isn't just an issue with padding or margin, but also with width, display, and the box model.

jsFiddle

span {
    display: inline-block;
}

This will honor any padding, margins, or widths you apply to the span.

Answer 3

Inline elements will not consume vertical padding and margin space. You can make the span display: block, but without more detail I don't know if that will achieve your goal.