我正试图在 http://jsfiddle.net 上解决我的问题并且在那里有最奇怪的行为。你能解释一下这些 ( http://jsfiddle.net/C6V3S/ ) 垂直边距从何而来吗?出现在 jsfiddle.net 上(至少在 Chrome 和 FF 中),复制/粘贴到本地独立文件时不出现 ...
在更改为简单 block 后工作正常
独立测试文件示例: .btn { 填充:0px; 边框:1px 纯红色; 显示:内联 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
元素成为 inline-block
时,它会被纳入父 .btn
元素的文本流中。那时,.btn
的行高开始生效,它大于 .txt
元素的高度。
因此,添加 .btn {line-height: 10px;}
(例如),您的问题就解决了。我看到您已经尝试影响内部 .txt
元素的行高,因此您的尝试非常接近。调整字体大小也可以,因为默认行高是基于字体大小的公式。无论如何,关键是在父元素上执行此操作,而不是在子元素上执行此操作。
当你将内部元素设为 block
时,你不会遇到这个问题,因为那样就没有类似文本的内容,所以根本没有应用行高。
关于html - 为什么 display=inline-block 会增加无法控制的垂直边距,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/56025371/