当我预览它时，它不会出现在Safari中，但在其他浏览器中会出现。
Here's the jsfiddle。
您可以看到“公文包”列表项下每个项下有大约2个像素的空白。这是从哪里来的？我已经将填充和边距设置为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>
最佳答案
它是从字体大小/行高开始的。添加：
#portfolio li {
font-size: 0;
}
或
#portfolio li {
line-height: 0;
}
导致this updated fiddle。
关于html - 列表项下面的空白来自何处？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/14304708/