inline-block特性
2018-04-13 本文已影响0人
饥人谷_易燃
特征
- 既呈现 inline 特性(不占据一整行，宽度由内容宽度决定)
- 又呈现 block 特性 (可设置宽高，内外边距)
- 默认情况下，inline-block元素之间就有空隙出现
缝隙问题
代码如下：
<!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
可以清楚的看到右侧页面展示哈哈和呵呵两个字之间产生了空隙，缝隙的实质就是元素标签段之间的空格
如何消除缝隙
1.去掉HTML中的空格
inline-block0002.png
2.使用font-size:0；
inline-block0004.png
inline-block元素如何对齐
vertical-align: top ;
以顶端对齐
vertical-align: bottom;
以底部对齐。
