解决inline-block元素的bug


在使用inline-block时,有时候出现的效果莫名奇妙,例如:

  • 两个inline-block 元素之间如果有空格、回车、tab,那么在页面上就有一个空隙
  • 两个不同高度的 inline-block 元素顶部无法对齐,或者使用inline-block下面无缘无故多出几像素

例子1,出现空隙

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<!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.去掉空格

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<!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 设置为0,然后在 inline-block 元素中将 font-size 设置为 14px

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
<!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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<!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(该属性增加或减少字符间的空白(字符间距))

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
<!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 (该属性增加或减少单词间的空白(即字间隔))

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
<!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,设置inline-block 后,莫名其妙出现一些空白

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>span设为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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>span设为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 元素顶部无法对齐

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
<!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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
<!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>

解决效果

-------------本文结束感谢您的阅读-------------

本文标题:解决inline-block元素的bug

文章作者:shenzekun

发布时间:2017年08月30日 - 21:08

最后更新:2017年11月13日 - 07:11

原始链接:http://www.shenzekun.cn/解决inline-block元素的bug.html

许可协议: 署名-非商业性使用-禁止演绎 4.0 国际 转载请保留原文链接及作者。

您的支持将鼓励我继续创作!