span pushes the adjacent span down

Question

HTML

<span class="symbol">$</span>
<span class="value">400</span>

This displays both "$" and "400" at the same level.

The moment I add

CSS

.symbol {
    font-size: 2em;
}

then, "400" is pushed down.

Question: Why is "400/.value" affected by changes to "$/.symbol" ?

Thanks.

http://codepen.io/anon/pen/emLLrm

The default vertical alignment for inline elements is baseline. — j08691, Mar 09 '15 at 16:59

score 2 · Accepted Answer · answered Mar 09 '15 at 16:07

2

This question realistically is about vertically aligning, and can be solved using

vertical-align:middle

or

vertical-align:top;

to override the default baseline (which by default is set to the bottom).

Demo:

.symbol {
  font-size: 2em;
  vertical-align:middle;
}

<span class="symbol">$</span>
<span class="value">400</span>

answered Mar 09 '15 at 16:07

jbutler483

24,074
9
92
145

Thanks. But it is not clear - why is "400" pushed down ? For e.g. if I wrap both "$" and "400" with a `div` initially, then both their `vertical-align` is `top`. And then, after I change the `font-size` of "$" to 2, then why is "400" suddenly not `vertical-align:top` ? – Kaya Toast Mar 09 '15 at 16:54
span (amongst many others) are defaulted to bottom (so think of 'they're aligned along the bottom of the div's top line' if that makes sence). I'll post another situation with divs in a sec to show this. – jbutler483 Mar 09 '15 at 16:59
@KayaToast: Here's that fiddle: http://jsfiddle.net/jbutler483/k4y8zasn/ - see how they seem to be aligned to top? try hovering one of them (where I change their height). See? Same issue. Adding vertical-align: top to the div will 'fix' this – jbutler483 Mar 09 '15 at 17:01
but why are the spans initially aligned to the top (when they are wrapped in a div, whose `height` > `line-height` of `.value/.symbol`) ? i'm not being difficult, i genuinely want to understand the concept – Kaya Toast Mar 09 '15 at 17:02
@KayaToast: default settings. spans have a baseline set to bottom, divs are set to top. Think of specificity: so the div will force eveerything to the 'first line' (which is set by default to top), so span is at the top. However, think of span being only a small height - only enough for a single line in fact - and so within this 'span' element, the text is actually aligned to the bottom (only you can't see this as it's a single line) – jbutler483 Mar 09 '15 at 17:05
[Updated fiddle for demo](http://jsfiddle.net/jbutler483/k4y8zasn/1/) – jbutler483 Mar 09 '15 at 17:08
1

This question is a duplicate (didn't know it had to do with inline-blocks) ... and your above comment aligns with spec/explanation from the other/original questions. Many thanks again. – Kaya Toast Mar 09 '15 at 17:09

score 0 · Answer 2 · answered Mar 09 '15 at 16:18

In addition if you want more control over the positioning in relation to the number, use position:relative and top: on the symbol to position where you'd like. For instance:

.symbol {
font-size: 2em;
position:relative;
top: .3em; /* or 10px if you want to use pixels */
}

span pushes the adjacent span down

2 Answers2