Display inline block adds uncontrollable vertical margins

Question

It seems that I've already got my problem in previous similar case, but now I've got same problem even after setting font-size and line-height of parent div to 0 and removing any potentially harmful white space.

In the sample (http://jsfiddle.net/vDsR4/2/) I expect height of the header to be exactly 40px, but i'm getting extra 5px of height and can't see any reason for them. (Works similarly in latest Chrome & FF) .

45px Header screenshot

Solved (partially): as noted in answers, the most probable reason for such behaviour is vertical-alignment = baseline (the default one). Now I notice that '[*]' icon is rendered below 'My Title'. To workaround the problem (as soon as all containing elements are supposed to be of the same height) setting vertical-align=top does the job. What is not yet clear to me - why smaller font has more space under baseline than the larger font.

enter image description here

.pagehdr-slice {
    padding: 0 32px;
    height: 40px;
    line-height: 40px;
    background-color: #2980BA;
    border-bottom: 3px solid #3273a2;
}

.pagehdr-titlebox {
    color: #AAD0E8;
    width: 200px;
    border-right: 1px solid red;
    font-size: 0;
    line-height: 0;
}

.pagehdr-title-icons, .pagehdr-title {
    display: inline-block;
    height: 40px; 
    line-height: 40px; 
    font-family: Arial;
    font-weight: bold;
}


.pagehdr-title-icons {
    font-size: 25px;
}

.pagehdr-title {
    font-size: 40px;
}

<header class="pagehdr-slice">
    <div class="pagehdr-titlebox"
       ><div class="pagehdr-title-icons">[*]</div
       ><div class="pagehdr-title">My Title</div
    ></div>
    <div class="pagehdr-splitter"></div>
</header>

try adding vertical-align: top; to the icon div http://jsfiddle.net/vDsR4/3/ — Huangism, Nov 20 '13 at 16:03
Huangism, you beat me to it, but your answer isn't in the form of an answer. :/ — isherwood, Nov 20 '13 at 16:07
In Firefox it's height + border-bottom = 43px, see @Jérémy's answer. When you remove border-bottom, the height is 40px as expected. — Olaf Dietsche, Nov 20 '13 at 16:17

score 2 · Accepted Answer · answered Nov 20 '13 at 16:05

2

Try:

.pagehdr-title-icons {vertical-align: top;}

http://jsfiddle.net/isherwood/vDsR4/4/

I'm struggling to explain this solution, but I think it has to do with the variation in font size between the two elements inside the header.

answered Nov 20 '13 at 16:05

isherwood

58,414
16
114
157

font size is different so it doesn't line up since the default vertical align is baseline(I think), so aligning to the top will solve this issue – Huangism Nov 20 '13 at 16:08
Makes sense, but I'd have thought a smaller font size would have a baseline at or above that of a larger font. – isherwood Nov 20 '13 at 16:08
Yes, it seems that reason behind this is aligning to baseline, and the strange thing is that smaller font has more 'space' under base line than larger font. Anyway - vertical-align: top - fixed my problem in my real use-case. Thanks. – Xtra Coder Nov 20 '13 at 16:49

score 1 · Answer 2 · answered Nov 20 '13 at 16:05

In latest Chrome, your header has an height of 43px that comes from the border you set (border ADD to the size, and are not contains in it).

If it doesn't solve your problem, try settings height at each level (so add an height to the children), that may help ; you also can set an overflow: hidden; on your header that would hide the extra-content, but it should be solved without it. ;)

score 0 · Answer 3 · answered Nov 20 '13 at 16:26

or add a float:left; in the .pagehdr-title-icons, .pagehdr-title class:

.pagehdr-title-icons, .pagehdr-title {
    display: inline-block;
    height: 40px; 
    line-height: 40px; 
    font-family: Arial;
    font-weight: bold;
    float:left; /*add this to align both */
}

Display inline block adds uncontrollable vertical margins

3 Answers3