CODEWITHSUNDEEP
htmlcss
Xtra Coder
Xtra Coder

Reputation: 3497

Display inline block adds uncontrollable vertical margins

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>

Upvotes: 0

Views: 342

Answers (3)

Jennift
Jennift

Reputation: 677

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 */
}

Upvotes: 0

isherwood
isherwood

Reputation: 61063

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.

Upvotes: 2

J&#233;r&#233;my Dutheil
J&#233;r&#233;my Dutheil

Reputation: 6137

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. ;)

Upvotes: 1

Related Questions