特征
- 既呈現(xiàn) inline 特性(不占據(jù)一整行，寬度由內(nèi)容寬度決定)
- 又呈現(xiàn) block 特性 (可設(shè)置寬高，內(nèi)外邊距)
- 默認情況下，inline-block元素之間就有空隙出現(xiàn)
縫隙問題
代碼如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>display: inline-block</title>
<style>
.space a {
display: inline-block;
font-size: 50px;
background-color: red;
}
</style>
</head>
<body>
<div class="space">
<a href="#">哈哈</a>
<a href="#">呵呵</a>
</div>
</body>
</html>
頁面顯示為：
inline-block0001.png
可以清楚的看到右側(cè)頁面展示哈哈和呵呵兩個字之間產(chǎn)生了空隙，縫隙的實質(zhì)就是元素標簽段之間的空格
如何消除縫隙
1.去掉HTML中的空格
inline-block0002.png
2.使用font-size:0；
inline-block0004.png
inline-block元素如何對齊
vertical-align: top ;
以頂端對齊
vertical-align: bottom;
以底部對齊。
