display：inline-block的縫隙和錯位問題
一、 縫隙問題
<style type="text/css">
*{
border: ;
padding: ;
margin: ;
}
ul li{
display: inline-block;
border: px solid #000000;
}
</style>
<body>
<ul>
<li>1111</li>
<li>2222</li>
<li>3333</li>
<li>4444</li>
<li>5555</li>
</ul>
</body>
這每個
li
之間的間隙是符合W3C标準規範的表現，是元素書寫的時候換行産生的空白符造成的問題。但不滿足業務需求。完善這種的縫隙有如下幾種方法：
一、書寫的時候，省略空格
<body>
<ul>
<li>1111</li><li>2222</li><li>3333</li><li>4444</li><li>5555</li>
</ul>
</body>
二、第一種方法，元素少的情況下還可以滿足，但不符合實際業務開發。第二種方法就是設定父元素的 font-size:0px
font-size
font-size:0px
font-size
ul{
font-size: 0;
}
ul li{
display: inline-block;
border: 1px solid #000000;
font-size: 14px;
}
<body>
<ul>
<li>1111</li>
<li>2222</li>
<li>3333</li>
<li>4444</li>
<li>5555</li>
</ul>
</body>
排列錯位問題
<style type="text/css">
.box{
border: px solid #000000;
width: px;
height: px;
display: inline-block;
}
.itemSmall_1{
background-color: chartreuse;
width: px;
height: px;
border: px solid #000000;
/* float: left; */
}
.itemSmall_2{
background-color: chartreuse;
width: px;
height: px;
border: px solid #000000;
float: left;
}
.itemBig1{
background-color: blue;
width: px;
height: px;
border: px solid #000000;
}
.itemBig2{
background-color: blue;
width: px;
height: px;
border: px solid #000000;
float: left;
}
</style>
<body>
<div class="box">
<div class="itemSmall_1">
</div>
<div class="itemBig1">
</div>
</div>
<div class="box">
<div class="itemSmall_2">
</div>
行内元素行内元素行内元素行内元素行内元素行内元素行内元素行内元素行内元素行内元素行内元素
</div>
</body>
原因，可能是快元素和行元素的baseline不一樣導緻上下不齊，是以解決的辦法就是設定統一的vertical-align屬性。基于同一個baseline值。
.box{
border: px solid #000000;
width: px;
height: px;
display: inline-block;
vertical-align: top;
}