<!-- HTML代碼 -->
<div class="parent">
<div class="child">child</div>
<div class="child">child</div>
<div class="child">child</div>
<div class="child">child</div>
</div>
/* css代碼 */
.child {display:inline-block;background-color:#ccc;}
瀏覽器中顯示的結果.png
雖然四個塊狀子元素排在了一行赔癌，但是子元素之間卻留有空隙！
產生的原因：
HTML中的換行符、空格符府蔗、制表符等空白符晋控，字體大小不為0的情況下，空白符占據一定寬度姓赤，使用inline-block會產生元素間的空隙赡译。
解決辦法：
- 方法一：改變html結構
結構1
<div class="parent">
<div class="child">
child</div><div class="child">
child</div><div class="child">
child</div><div class="child">
child</div><div class="child">
child</div>
</div>
結構2
<div class="parent">
<div class="child">child</div
><div class="child">child</div
><div class="child">child</div
><div class="child">child</div
><div class="child">child</div>
</div>
結構3
<div class="parent">
<div class="child">child</div><!--
--><div class="child">child</div><!--
--><div class="child">child</div><!--
--><div class="child">child</div><!--
--><div class="child">child</div>
</div>
結構4
<div class="parent">
<div class="child">child</div><div class="child">child</div><div class="child">child</div><div class="child">child</div><div class="child">child</div>
</div>
- 方法二：設置負的margin值
- 方法三：設置父元素的font-size:0;
- 方法四：設置父元素的word-spacing
.finally-solve {
letter-spacing: -4px;/*根據不同字體字號或許需要做一定的調整*/
word-spacing: -4px;
font-size: 0;
}
.finally-solve li {
font-size: 16px;
letter-spacing: normal;
word-spacing: normal;
display:inline-block;
*display: inline;
zoom:1;
}
