神秘的底部填充/边距问题
理查德·罗杰斯
我有一个主要的.features类的div，在这个div中，我有两个框，每个框的高度设置为160px，宽度不同。如下面的屏幕截图所示，两个框的末端与主div之间存在一个神秘的填充物：
填充约5像素-如果可能，我想删除此填充。我尝试添加保证金：0; 和填充：0; 到主要div以及两个内部框，但这没有用。
这是页面本部分的html：
<div class="features">
<div class="list-items"></div>
<div class="screenshot-box"></div>
</div>
CSS：
.features {
width: 980px;
margin: auto;
margin-top: 25px;
background-color: lightblue;
}
.list-items {
width: 280px;
height: 160px;
display: inline-block;
background-color: red;
}
.screenshot-box {
width: 583px;
height: 160px;
float: right;
padding-bottom: 0;
display: inline-block;
background-color: red;
}
詹姆斯·唐纳利
这实际上与padding或无关margin。如果查看计算的样式示例，我们将看到height元素本身的是164px：
发生这种情况是因为您的内部元素设置为显示为inline-block。这表示它们受的影响font-size，最终font-size导致父元素的高度大于内部元素的高度。
有两个修复程序：
- 在您的元素上指定一个
font-sizeof ，然后在内部元素中将其重置（通过为它们提供of ，或者使用您的默认大小）。0.featuresfont-size16
.features {
width: 980px;
margin: auto;
margin-top: 25px;
background-color: lightblue;
font-size: 0;
}
.list-items {
width: 280px;
height: 160px;
display: inline-block;
background-color: red;
font-size: 16px;
}
.screenshot-box {
width: 583px;
height: 160px;
float: right;
padding-bottom: 0;
display: inline-block;
background-color: red;
font-size: 16px;
}<div class="features">
<div class="list-items"></div>
<div class="screenshot-box"></div>
</div>- 给你的
.features元素的height的160px本身以匹配其孩子。这样浏览器就不必自己计算高度。
.features {
width: 980px;
margin: auto;
margin-top: 25px;
background-color: lightblue;
height: 160px;
}
.list-items {
width: 280px;
height: 160px;
display: inline-block;
background-color: red;
}
.screenshot-box {
width: 583px;
height: 160px;
float: right;
padding-bottom: 0;
display: inline-block;
background-color: red;
}<div class="features">
<div class="list-items"></div>
<div class="screenshot-box"></div>
</div>本文收集自互联网，转载请注明来源。
如有侵权，请联系 [email protected] 删除。
编辑于
相关文章
TOP 榜单
- 1
Android Studio Kotlin：提取为常量
- 2
计算数据帧R中的字符串频率
- 3
如何使用Redux-Toolkit重置Redux Store
- 4
http：// localhost：3000 /＃！/为什么我在localhost链接中得到“＃！/”。
- 5
如何使用tweepy流式传输来自指定用户的推文（仅在该用户发布推文时流式传输）
- 6
TreeMap中的自定义排序
- 7
TYPO3：将 Formhandler 添加到新闻扩展
- 8
遍历元素数组以每X秒在浏览器上显示
- 9
在Ubuntu和Windows中，触摸板有时会滞后。硬件问题？
- 10
警告消息：在matrix（unlist（drop.item），ncol = 10，byrow = TRUE）中：数据长度[16]不是列数的倍数[10]>？
- 11
无法连接网络并在Ubuntu 14.04中找到eth0
- 12
将辅助轴原点与主要轴对齐
- 13
我可以ping IPv6但不能ping IPv4
- 14
在Jenkins服务器中使用Selenium和Ruby进行的黄瓜测试失败，但在本地计算机中通过
- 15
提交html表单时为空
- 16
使用C ++ 11将数组设置为零
- 17
如果从DB接收到的值为空，则JMeter JDBC调用将返回该值作为参数名称
- 18
尝试在Dell XPS13 9360上安装Windows 7时出错
- 19
如何在R中转置数据
- 20
无法使用 envoy 访问 .ssh/config
- 21
未捕获的SyntaxError：带有Ajax帖子的意外令牌u
我来说两句