在使用inline-block時，有時候出現(xiàn)的效果莫名奇妙宋舷，例如：
- 兩個inline-block 元素之間如果有空格绪撵、回車、tab祝蝠，那么在頁面上就有一個空隙
- 兩個不同高度的 inline-block 元素頂部無法對齊莲兢，或者使用inline-block下面無緣無故多出幾像素
例子1,出現(xiàn)空隙
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JS Bin</title>
<style>
div{
display: inline-block;
width:100px;
height: 100px;
background-color: rgb(233, 148, 148);
}
</style>
</head>
<body>
<div></div>
<div></div>
</body>
</html>
效果：
解決方法
1.去掉空格
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JS Bin</title>
<style>
div{
display: inline-block;
width:100px;
height: 100px;
background-color: rgb(233, 148, 148);
}
</style>
</head>
<body>
<div></div><div></div>
</body>
</html>
2. 添加父元素，將父元素的 font-size 設(shè)置為0续膳，然后在 inline-block 元素中將 font-size 設(shè)置為 14px
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JS Bin</title>
<style>
.parent{
font-size:0;
}
.child{
font-size:14px;
display: inline-block;
width:100px;
height: 100px;
background-color: rgb(233, 148, 148);
}
</style>
</head>
<body>
<div class="parent">
<div class="child"></div>
<div class="child"></div>
</div>
</body>
</html>
3. 使用margin-right
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JS Bin</title>
<style>
.child{
display: inline-block;
width:100px;
height: 100px;
background-color: rgb(233, 148, 148);
margin-right:-5px;
}
</style>
</head>
<body>
<div class="child"></div>
<div class="child"></div>
</body>
</html>
4. 添加父元素改艇，使用letter-spacing（該屬性增加或減少字符間的空白（字符間距））
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JS Bin</title>
<style>
.parent{
letter-spacing:-5px;
}
.child{
display: inline-block;
width:100px;
height: 100px;
background-color: rgb(233, 148, 148);
}
</style>
</head>
<body>
<div class="parent">
<div class="child"></div>
<div class="child"></div>
</div>
</body>
</html>
5. 使用word-spacing （該屬性增加或減少單詞間的空白（即字間隔））
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JS Bin</title>
<style>
.parent{
word-spacing:-5px;
}
.child{
display: inline-block;
width:100px;
height: 100px;
background-color: rgb(233, 148, 148);
}
</style>
</head>
<body>
<div class="parent">
<div class="child"></div>
<div class="child"></div>
</div>
</body>
</html>
解決效果：
例子2，設(shè)置inline-block 后坟岔，莫名其妙出現(xiàn)一些空白
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>span設(shè)為inline-block之后下面的空白</title>
<style>
div{
border:solid 1px rgb(202, 43, 43);
width:250px;
}
span{
display:inline-block;
width:200px;
height:200px;
background-color:rgb(109, 195, 252);
}
</style>
</head>
<body>
<div>
<span></span>
</div>
</body>
</html>
效果
解決方法
使用vertical-align
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>span設(shè)為inline-block之后下面的空白</title>
<style>
div{
border:solid 1px rgb(202, 43, 43);
width:250px;
}
span{
display:inline-block;
width:200px;
height:200px;
background-color:rgb(109, 195, 252);
vertical-align:top;//新增
}
</style>
</head>
<body>
<div>
<span></span>
</div>
</body>
</html>
解決效果
例子3谒兄，兩個不同高度的 inline-block 元素頂部無法對齊
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JS Bin</title>
<style>
.child1{
display: inline-block;
width:100px;
height: 100px;
background-color: rgb(109, 195, 252);
}
.child2{
display: inline-block;
width:100px;
height: 120px;
background-color: rgb(233, 148, 148);
}
</style>
</head>
<body>
<div class="child1"></div>
<div class="child2"></div>
</body>
</html>
效果
解決方法
還是使用vertical-align
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JS Bin</title>
<style>
.child1{
display: inline-block;
width:100px;
height: 100px;
vertical-align:top;//新增
background-color: rgb(109, 195, 252);
}
.child2{
display: inline-block;
width:100px;
height: 120px;
background-color: rgb(233, 148, 148);
}
</style>
</head>
<body>
<div class="child1"></div>
<div class="child2"></div>
</body>
</html>
解決效果
