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

您可以找到Detailed answer here

您还可以通过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>是替换的内联元素，默认情况下位于 baseline 。

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

您可以通过vertical-align属性将图片与baseline以外的值对齐来解决问题：

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

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

4个额外的垂直像素？

2 个答案: