CSS里的display:inline-block会有间隙，怎么解决？
展开全部
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
</head>
<body>
未使用font-size:0方法的
使用inline-block出现的间隙的解决方法：
父加上样式 font-size:0; 是为的是去掉多余的空白
子元素加上应有的字体样式
<div style="width:120px; background:#ECEAEA; padding:10px;text-align:center;">
<span style="display:inline-block;font-size:12px;width:50px; height:50px; line-height:50px; background:#F78789; vertical-align:middle; text-align:center;">1</span>
<span style="display:inline-block;font-size:12px;width:50px; height:50px; line-height:50px; background:#35B86D;vertical-align:middle; text-align:center;">2</span>
</div>
使用font-size:0方法后的效果
<div style="font-size:0; width:120px; background:#ECEAEA; padding:10px;text-align:center;">
<span style="display:inline-block;font-size:12px;width:50px; height:50px; line-height:50px; background:#F78789; vertical-align:middle; text-align:center;">1</span>
<span style="display:inline-block;font-size:12px;width:50px; height:50px; line-height:50px; background:#35B86D;vertical-align:middle; text-align:center;">2</span>
</div>
</body>
</html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
</head>
<body>
未使用font-size:0方法的
使用inline-block出现的间隙的解决方法：
父加上样式 font-size:0; 是为的是去掉多余的空白
子元素加上应有的字体样式
<div style="width:120px; background:#ECEAEA; padding:10px;text-align:center;">
<span style="display:inline-block;font-size:12px;width:50px; height:50px; line-height:50px; background:#F78789; vertical-align:middle; text-align:center;">1</span>
<span style="display:inline-block;font-size:12px;width:50px; height:50px; line-height:50px; background:#35B86D;vertical-align:middle; text-align:center;">2</span>
</div>
使用font-size:0方法后的效果
<div style="font-size:0; width:120px; background:#ECEAEA; padding:10px;text-align:center;">
<span style="display:inline-block;font-size:12px;width:50px; height:50px; line-height:50px; background:#F78789; vertical-align:middle; text-align:center;">1</span>
<span style="display:inline-block;font-size:12px;width:50px; height:50px; line-height:50px; background:#35B86D;vertical-align:middle; text-align:center;">2</span>
</div>
</body>
</html>
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
