簡述inline-block的邊距問題及解決方法
阿新 • • 發佈：2019-02-12
當我們將一個元素的display設定為inline-block時，設定好各元素的寬高及顏色後，這個邊距就會詭異的出現了，即使你使用（margin:0;padding:0;）也是無法消除的。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
*{
margin: 0;
padding 
那麼，這個詭異的邊距為什麼會出現呢？我們先來了解一下它出現的原理。
其實，很簡單，作為程式設計師，都會有一個習慣，就是寫一行程式碼換一行，這是為了讓我們的程式碼可讀性更高。其實，正是因為這個換行，導致了這個間隔的出現。寫到這，相信很多童鞋都會有一個解決方法了，那就是不換行就行了唄，但是呢，不換行又會導致我們的程式碼可讀性降低。
所以，我統計了幾種解決方法：
第一種方法：就是大多數人都會想到的將要轉換為inline-block的元素寫在一起，不換行就行了，雖然這會使程式碼可讀性降低，但這也不失為一種解決方法。
將以上程式碼修改為：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
div{
width: 100px;
height: 100px;
background: #f00;
display: inline-block;
}
</style>
</head>
<body>
<div></div><div></div><div></div>
</body>
</html>第二種方法：在要轉換為inline-block的元素之間加入註釋符，將換行註釋掉就ok了
程式碼如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
div{
width: 100px;
height: 100px;
background: #f00;
display: inline-block;
}
</style>
</head>
<body>
<div></div><!--
--><div></div><!--
--><div></div>
</body>
</html>第三種方法：將結束標籤與下一個開始標籤寫在一起，這樣，他們之間的空格也會被清除掉，額，好像這樣的可讀性也不是太高。
程式碼如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
div{
width: 100px;
height: 100px;
background: #f00;
display: inline-block;
}
</style>
</head>
<body>
<div>
</div><div>
</div><div>
</div>
</body>
</html>第四種方法：將元素結束標籤的”>“放在下一行的開始處
程式碼：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
div{
width: 100px;
height: 100px;
background: #f00;
display: inline-block;
}
</style>
</head>
<body>
<div>
</div
><div>
</div
><div>
</div>
</body>
</html>四中方法的截圖：
那，inline-block的邊距問題就講到這，其實，網上也還有更多其它的方法，個人覺得還是這幾種方法最好，因為它們僅僅是改變html，相容問題也不用考慮。
如果還有其它更好的方法，歡迎分享。