4额外垂直像素？ [英] 4 extra vertical pixels?

问题描述

我有一个标题元素，其结构如下：

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>

要使用的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 height基本上每个元素，但在Chrome中它的渲染在 84px 的高度。您可以在这里看到它： www.element17.com 。

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?

推荐答案

这是因为< img> 是替换的内联元素，它位于其 基线 。

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

图片本身的高度为 80px ，额外的垂直间隙属于

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

您可以通过 vertical-align 属性$ c> baseline ：

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

有关详细信息，请参阅 此answer 。

For further information you can refer to this answer.

这篇关于4额外垂直像素？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！