61,129
社区成员
发帖
与我相关
我的任务
分享空的inline-block却占据了位置求大神解答
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div{
background-color: red;
}
span#test{
background-color: blue;
display: inline-block;
line-height: 0px;
}
</style>
</head>
<body>
<div>12312312</div>
<span id="test"></span>
<div>12312312</div>
</body>
</html>
分明span中没东西却占据了位置
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div{
background-color: red;
}
span#test{
background-color: blue;
display: inline-block;
line-height: 0px;
}
</style>
</head>
<body>
<div>12312312</div>
<span id="test"></span>
<div>12312312</div>
</body>
</html>
分明span中没东西却占据了位置
...全文
请发表友善的回复…
发表回复
wsmh3333 2020-07-27
- 打赏
- 举报
<div>12312312</div><span id="test"></span><div>12312312</div>
winzond 2020-06-29
- 打赏
- 举报
你的目的是什么？上下都是div，默认就占整行了，你又设置span行高为0，这是没用的，不想让它显示就设置display:none，想让它显示，那就要重新定位下面那个div，不让它按顺序布局。其实首先应该搞清楚目的
易小楠 2020-06-29
- 打赏
- 举报
经过实验并不存在,而且如果去掉css设置inline-block后中间间距就不存在了。
weixin_37683702 2020-06-29
- 打赏
- 举报
inline和inline-block都有一个默认的margin,大概3px
易小楠 2020-06-29
- 打赏
- 举报
这个line-height:0是有人让我这样试试 没去掉抱歉,我就想知道inline-block分明是空的却占位置很奇怪,并不涉及具体的实现。
