我有一个 header 元素,其构造如下:
<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 .
为什么会这样?
最佳答案
那是因为 <img>
是位于其 baseline 上的替换内联元素 默认。
图像本身的高度为 80px
并且额外的垂直间隙属于行高保留字符(descenders like: g j p q y)。
您可以简单地通过 vertical-align
对齐图像来解决这个问题值不是 baseline
的属性:
img {
vertical-align: middle; /* top or bottom */
}
更多信息可以引用this answer .
关于html - 4个额外的垂直像素?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/22510403/