Html 列表项下面的空白从何而来？_Html_Css

Html 列表项下面的空白从何而来？

html css

Html 列表项下面的空白从何而来？,html,css,Html,Css,预览safari时，它不会出现在safari中，但在其他浏览器中会出现您可以看到“公文包”列表项在每个项下有大约2个像素的空白。这是从哪里来的？我已经将padding和margins设置为0和nowrap，但无法找出任何其他原因。。有什么想法吗 * { margin:0; } html, body { height:100%; } body { background-color:#fff; } #leftnav { background-color:#

预览safari时，它不会出现在safari中，但在其他浏览器中会出现

您可以看到“公文包”列表项在每个项下有大约2个像素的空白。这是从哪里来的？我已经将padding和margins设置为0和nowrap，但无法找出任何其他原因。。有什么想法吗

* { 
    margin:0; 
}
html, body { 
    height:100%; 
}
body {
    background-color:#fff;
}
#leftnav {
    background-color:#232323;
    width:20%;
    min-height:100%;
    height: auto !important;
    float:left;
    text-align:center;
    padding:75px 0 0px 0px;
    position:fixed;
    left:0;
    top:0;
}
#portfolio {
    white-space: nowrap;
    text-align:center;
    margin:0;
    width:80%;
    float:right;
}
#portfolio ul {
    margin:0;
    padding:0;
}
#portfolio li {
    width: 25%;
    display: inline-block;
    text-align: center;
    vertical-align: middle;
    margin:0;
    padding:0;
    float:left;
}
#portfolio img {
    max-width:100%;
    margin:0;
    padding:0;
}
#maintop {
    width:80%;
    height:45%;
    background-color:#caab7e;
    float:right;
    text-align:center;
}

<body>
<div id="leftnav"></div>
<div id="maintop"></div>
<div id="portfolio">
<ul>
    <li><img src="http://dummyimage.com/400x300/000/fff"></li>
    <li><img src="http://dummyimage.com/400x300/090/fff"></li>
    <li><img src="http://dummyimage.com/400x300/900/fff"></li>
    <li><img src="http://dummyimage.com/400x300/009/fff"></li>
    <li><img src="http://dummyimage.com/400x300/000/fff"></li>
    <li><img src="http://dummyimage.com/400x300/090/fff"></li>
    <li><img src="http://dummyimage.com/400x300/900/fff"></li>
    <li><img src="http://dummyimage.com/400x300/009/fff"></li>
    <li><img src="http://dummyimage.com/400x300/000/fff"></li>
    <li><img src="http://dummyimage.com/400x300/090/fff"></li>
    <li><img src="http://dummyimage.com/400x300/900/fff"></li>
    <li><img src="http://dummyimage.com/400x300/009/fff"></li>
</ul>
</div>
</body>

*{
保证金：0；
}
html，正文{
身高：100%；
}
身体{
背景色：#fff；
}
#左导航{
背景色：#232323；
宽度：20%；
最小高度：100%；
高度：自动！重要；
浮动：左；
文本对齐：居中；
填充：75px0px0px；
位置：固定；
左：0；
排名：0；
}
#投资组合{
空白：nowrap；
文本对齐：居中；
保证金：0；
宽度：80%；
浮动：对；
}
#投资组合保险{
保证金：0；
填充：0；
}
#组合李{
宽度：25%；
显示：内联块；
文本对齐：居中；
垂直对齐：中间对齐；
保证金：0；
填充：0；
浮动：左；
}
#组合img{
最大宽度：100%；
保证金：0；
填充：0；
}
#主顶部{
宽度：80%；
身高：45%；
背景色：#caab7e；
浮动：对；
文本对齐：居中；
}

我也不知道空白是从哪里来的，但是你可以设置

li{height:87px；}

使空白消失。

它来自字体大小/行高。添加：

#portfolio li {
  font-size: 0;
}

或：

导致。

Opera浏览器也没有空间。我正在firefox中用firebug插件检查它，我可以看到img的高度是285px，li的高度是290px。现在，当我为li添加高度285px时，空间消失了

#portfolio li {
width: 25%;
display: inline-block;
text-align: center;
vertical-align: middle;
margin:0;
padding:0;
float:left;
height: 285px;
}

问题是我希望高度是流动的。但它看起来像是从行高和字体大小。

#portfolio li {
width: 25%;
display: inline-block;
text-align: center;
vertical-align: middle;
margin:0;
padding:0;
float:left;
height: 285px;
}