至始至终都找不到一个好的标题来形容这个现象，不过在大量搜索资料后得知原因是CSS的inline-block换行引发的间隙，最终也按大佬们的方法解决了问题，记录一下。
DEMO:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
.list {width: 509px; border: 1px solid #cccccc;}
.list div{ display: inline-block; color:#ffffff; background-color: cadetblue; width: 125px; margin-right: 3px; font-size: 18px; text-align: center; height: 60px; line-height: 60px;}
.list div:nth-child(4n){margin-right: 0px;}
</style>
</head>
<body>
<h1>源代码换行产生 css间隙</h1>
<div class="list">
<div>床</div>
<div>前</div>
<div>明</div>
<div>月</div>
</div>
<h1>源代码不换行 一切正常</h1>
<div class="list">
<div>床</div><div>前</div><div>明</div><div>月</div>
</div>
<h1>父元素增加 font-size:0;-webkit-text-size-adjust:none; 解决源代码换行产生 css间隙</h1>
<div class="list" style="font-size:0;-webkit-text-size-adjust:none;">
<div>床</div>
<div>前</div>
<div>明</div>
<div>月</div>
</div>
</body>
</html>
标签: css
非特殊说明，本博所有文章均为博主原创。
如若转载，请注明出处：https://www.isres.com/html/420.html