[英]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>
The CSS to go with is as follows: 附带的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;}
I've specified an 80px
height on basically every element, and yet in Chrome it's rendering at 84px
in height. 我基本上在每个元素上都指定了
80px
高度,但是在Chrome中,它的高度为84px
。 You can see it live here: www.element17.com . 您可以在此处实时查看它: www.element17.com 。
Why is this happening? 为什么会这样呢?
instead of using 而不是使用
display:table-cell
you can use 您可以使用
display:block
#title {
display: block;
height: 80px;
margin: 0;
padding: 0 20px 0 0;
border-right: 1px solid rgba(255,255,255,0.75);
}
You can find Detailed answer here 您可以在这里找到详细答案
you can also remove white space in the markup by font-size:0px; 您还可以通过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;
}
That's because the <img>
is a replaced inline element which sits on its baseline by default. 这是因为
<img>
是替换的内联元素,默认情况下位于其基线上 。
The image itself has a height of 80px
and the extra vertical gap belongs to the line height reserved characters (descenders like: gjpqy). 图像本身的高度为
80px
,额外的垂直间隙属于行高保留字符(如gjpqy之类的后缀)。
You could simply fix that by aligning the image by vertical-align
property with a value other than baseline
: 您可以通过将
vertical-align
属性的图像与baseline
以外的值vertical-align
来解决此问题:
img {
vertical-align: middle; /* top or bottom */
}
For further information you can refer to this answer . 有关更多信息,请参考此答案 。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.