html – 为什么display = inline-block增加不可控制的垂直边距

前端之家收集整理的这篇文章主要介绍了html – 为什么display = inline-block增加不可控制的垂直边距前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我正在努力解决我的问题在 http://jsfiddle.net,并有最奇怪的行为。你能解释这些( http://jsfiddle.net/C6V3S/)垂直边距是从哪里来的?出现在jsfiddle.net(至少在Chrome和FF中),当复制/粘贴到本地独立文件时,不会出现…

工程可以改为简单的块

独立测试文件示例:

.btn {
padding:0px;
边框:1px纯红色;
显示:inline-block;
}

.txt {
    display: inline-block;
    width: 12px;
    height: 12px;
    border: none;
    padding: 0;
    margin: 0;
    background: #77FF77;
}
</style>

<div class="btn"><div class="txt"></div></div>

解决方法

当您使.txt元素内联块时,它将进入父.btn元素的文本流。在这一点上,.btn的线高度踢入,大于.txt元素的高度。

所以,添加.btn {line-height:10px;}(例如),你的问题是固定的。我看到你已经试图影响内部的.txt元素的线高,所以你的尝试相当接近。调整字体大小也会起作用,因为默认行高是基于font-size的公式。无论如何,关键是要在父元素上执行,而不是子元素。

当您使内部元素成为块时,您没有这个问题,因为那里没有类似文本的内容,所以没有应用任何行高。

原文链接:https://www.f2er.com/html/233647.html

猜你在找的HTML相关文章