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

而不是使用

 display:table-cell

您可以使用

 display:block

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

您可以在這里找到詳細答案

您還可以通過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;
}

Answer 2

這是因為<img>是替換的內聯元素，默認情況下位於其基線上 。

圖像本身的高度為80px ，額外的垂直間隙屬於行高保留字符（如gjpqy之類的后綴）。

您可以通過將vertical-align屬性的圖像與baseline以外的值vertical-align來解決此問題：

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

有關更多信息，請參考此答案 。