4 extra vertical pixels?

Question

I've got a header element that's constructed as follows:

<div id="header">
  <div id="title">
    <img src="images/logo.png" alt="Element17 Photography">
  </div>
  <div id="menu">
    <ul>
      <li class="togglelink grey2white button" data-block="albums" id="togglealbums">Albums</li>
      <li class="togglelink grey2white button" data-block="about" id="toggleabout">About Me</li>
      <li class="togglelink grey2white button" data-block="contact" id="togglecontact">Contact</li>
    </ul>
  </div>
</div>

The CSS to go with is as follows:

#header {left:10px; top:10px; position:absolute; height:80px; display:table;}
#title {display:table-cell; height:80px; margin:0; padding:0 20px 0 0; border-right:1px solid rgba(255,255,255,0.75);}
#menu {display:table-cell; vertical-align:middle; margin:0; padding:0; height:80px;}
#menu ul {list-style-type:none; margin:0 0 0 20px; padding:0; font-size:0.75em;}

I've specified an 80px height on basically every element, and yet in Chrome it's rendering at 84px in height. You can see it live here: www.element17.com.

Why is this happening?

Is it a problem visually or are you just bothered by the extra pixels as a developer? To be honest I can't really see any problems with it. — Niklas, Mar 19 '14 at 15:27

score 2 · Answer 1 · edited May 23 '17 at 12:11

2

instead of using

 display:table-cell

you can use

 display:block

#title {
    display: block;
    height: 80px;
    margin: 0;
    padding: 0 20px 0 0;
    border-right: 1px solid rgba(255,255,255,0.75);
}

You can find Detailed answer here

you can also remove white space in the markup by font-size:0px;

#title
{
    display: table-cell;
    height: 80px;
    margin: 0;
    padding: 0 20px 0 0;
    border-right: 1px solid rgba(255,255,255,0.75);
    font-size: 0px;
}

edited May 23 '17 at 12:11

Community

1
1

answered Mar 19 '14 at 15:24

Mehmet Eren Yener

2,006
1
23
37

font-size:0px doesn't remove white space in the markup, it merely hides its presence. The better fix for that would probably be to just find and remove the offending whitespace. – Hecksa Mar 19 '14 at 15:33

score 2 · Accepted Answer · edited May 23 '17 at 12:20

That's because the <img> is a replaced inline element which sits on its baseline by default.

The image itself has a height of 80px and the extra vertical gap belongs to the line height reserved characters (descenders like: g j p q y).

You could simply fix that by aligning the image by vertical-align property with a value other than baseline:

img {
    vertical-align: middle; /* top or bottom */
}

For further information you can refer to this answer.

4 extra vertical pixels?

2 Answers2

Linked