Why is margin-top of an inline-element is pushing down everything after it

Question

i have the following markup

<a class="block"><span class="inline">hello</span>world</a>

the <a> has a display:block ... if i give the span.inline a margin-top:3px it also pushes down the text after it. here is a jsfiddle to see this behaviour

http://jsfiddle.net/YLMeh/

could anybody give me a hint why this is happening?

Related http://stackoverflow.com/questions/9273016/why-is-this-inline-block-element-pushed-downward — andyb, Nov 02 '12 at 13:55

score 2 · Accepted Answer · answered Nov 02 '12 at 13:53

2

All inline elements on a row share the same line-height. If you think about it it makes sense. What would happen when you have multiple lines of text otherwise? It would be completely unreadable.

In these situation the vertical-align attribute is what you have to work with. Read up on that and you should be fine.

answered Nov 02 '12 at 13:53

Per Salbark

3,597
1
23
24

wouldnt this mean, if i add a "vertical-align:middle" to the , that everything should work as (i) expect? – mr.alex Nov 02 '12 at 13:57
i need ed to add a "vertical-align:top" to the ... because the margin-top also pushes down the "vertical-align:middle" ;-) – mr.alex Nov 02 '12 at 14:08

score 1 · Answer 2 · answered Nov 02 '12 at 13:53

1

margin-top: 3px; applied to your <span class="inline"> pushes the baseline down for the whole text.

understanding the vertical-align css property may help: https://developer.mozilla.org/en-US/docs/CSS/vertical-align

answered Nov 02 '12 at 13:53

Luca

9,259
5
46
59

Why is margin-top of an inline-element is pushing down everything after it

2 Answers2