Geek Answers Handbook

Why does <span> violate <div> when margin and addition are applied?

I know this is very simple CSS. How to save the range contained in a div? Currently, the span extends beyond the top and bottom of the div.

div { width: 200px; margin: 10px; background-color: #ff0; } span { margin: 5px; padding: 5px; background-color: #fc0; } 
 <body> <div> <span>span</span> </div> </body>
+7
source share
3 answers

To answer your question, this is not just a problem with padding or margin , but also with width , display and box model .

jsFiddle

 span { display: inline-block; }

This will mean any indentation, margins or width that you apply to the range.

+24
source

String elements will not use vertical padding and space with an edge. You can do a span display: block , but without any details, I don’t know if this will achieve your goal.

0
source

The vertical padding, border, and edge of an embedded, non-replaced block (such as span) begin at the top and bottom of the content area and have nothing to do with the "line height". But when calculating the line height of a line, only line-height is used. So you see the overlap here: http://jsfiddle.net/Q9AED/

If you want to use a simple solution, you can use linear height, not display: inline-block: using line height .

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

0
source

More articles:


All Articles