4个额外的垂直像素？

Question

我有一个在构造一个头元素如下：

<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> 

的CSS去与如下：

#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;} 

我指定基本上每件上的一80px高度，但在Chrome中，它的高度为84px。你可以在这里看到它：www.element17.com。

这是怎么发生的？的

Answer 1

这是因为<img>是坐在其baseline默认情况下，代替内联元素。

图像本身的高度为80px，额外的垂直间隙属于行高保留字符（下行像：g j p q y）。

你可以简单地解决这个问题，通过vertical-align特性，进行图像比baseline以外的值排列：

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

欲了解更多信息，可以参考this answer。

Answer 2

而是采用

​​

可以使用

display:block 

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

你可以找到Detailed answer here

您还可以通过字体大小删除空白的标记：0像素;

#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; 
}