在CSS布局中，如果我們想要將一些元素在同一行顯示，其中的一種方法就是把要同行顯示的元素設置display屬性為inline-block。但是你會發現這些同行顯示的inline-block元素之間會出現一定的空隙。
效果圖:
代碼:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
body {
margin: 0;
}
.box1,.box2 {
width: 200px;
height: 200px;
border: 1px solid;
display: inline-block;
}
</style>
</head>
<body>
<div class="box1"></div>
<div class="box2"></div>
</body>
</html>
原因:
元素被當成行內元素排版的時候，元素之間的空白符（空格、回車換行等）都會被瀏覽器處理，根據white-space的處理方式(默認是normal,空白會被瀏覽器忽略)，HTML代碼中的回車換行被轉成一個空白符，在字體不為0的情況下，空白符占據一定寬度，所以inline-block的元素之間就出現了空隙。
解決辦法:
一、刪除元素之間的空白符
缺點:代碼可讀性差
代碼:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
body {
margin: 0;
}
.box1,.box2 {
width: 200px;
height: 200px;
border: 1px solid;
display: inline-block;
}
</style>
</head>
<body>
<div class="box1">box1</div><div class="box2">box2</div>
</body>
</html>
二、在父元素中設置font-size: 0,在子元素上重新設置正確的font-size
缺點：inline-block的元素必須設定字體大小，不然行內元素中的字體不會顯示,且增加了代碼量
代碼:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
body {
margin: 0;
font-size: 0;
}
.box1,.box2 {
width: 200px;
height: 200px;
border: 1px solid;
display: inline-block;
font-size: 16px;
}
</style>
</head>
<body>
<div class="box1">box1</div>
<div class="box2">box2</div>
</body>
</html>
三、為inline-block元素添加樣式float:left
缺點:直接浮動就可以讓一些元素在同一行顯示,inline-block再浮動顯得多此一舉
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
body {
margin: 0;
}
.box1,.box2 {
width: 200px;
height: 200px;
border: 1px solid;
display: inline-block;
float: left;
}
</style>
</head>
<body>
<div class="box1">box1</div>
<div class="box2">box2</div>
</body>
</html>
最后來張解決問題的效果圖:
