为什么display = inline-block会添加不可控制的垂直边距 [英] Why display=inline-block adds uncontrollable vertical margins

问题描述

我试图在 http://jsfiddle.net 上摆弄我的问题，并在那里发生了奇怪的行为。你能解释一下这些（ http://jsfiddle.net/C6V3S/ ）垂直边距来自哪里吗？不会出现在jsfiddle.net（至少在Chrome和FF中），当复制/粘贴到本地独立文件时不会出现...

可以更换为简单块

独立测试文件示例：

.btn {
padding：0px;
border：1px纯红色;
display：inline-block;
}

  .txt {
 display：inline-block; 
 width：12px; 
 height：12px; 
 border：none; 
 padding：0; 
保证金：0; 
背景：＃77FF77; 
} 
< / style> 
 
< div class =btn>< div class =txt>< / div>< / div> 
  

解决方案

制作时。 txt 元素 inline-block ，它被带入父 .btn 元素。此时， .btn 的行高会大于 .txt 的高度。元件。

因此，请添加 .btn {line-height：10px;} （例如） 。我看到你已经试图影响内部 .txt 元素的行高，所以你非常接近你的尝试。调整字体大小也可以，因为默认的行高是基于字体大小的公式。无论如何，关键是要在父元素上做到这一点，而不是子元素。

当你使内部元素为<$ c时，你没有这个问题$ c> block ，因为那里没有文本内容，所以根本没有应用行高。

I'm trying to fiddle my problem on http://jsfiddle.net and have got strangest behaviour there. Can you please explain where these (http://jsfiddle.net/C6V3S/) vertical margins come from? Does appear on jsfiddle.net (at least in Chrome and FF), do not appear when copy/pasting to local standalone file ...

works OK afer changing to simple block

Sample for standalone test file: .btn { padding: 0px; border: 1px solid red; display: 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>

解决方案

When you make the .txt element inline-block, it is taken into the text flow of the parent .btn element. At that point, the line-height of .btn kicks in, which is larger than the height of the .txt element.

So, add .btn {line-height: 10px;} (for example) and your problem is fixed. I saw you already tried to influence the line-height of the inner .txt element, so you were pretty close with your attempts. Adjusting the font-size would work as well, since the default line-height is formula-based on the font-size. Anyway, the key is to do that on the parent element, not the child element.

You don't have this problem when you make the inner element a block, because then there's no text-like content, so there's no line-height applied at all.

这篇关于为什么display = inline-block会添加不可控制的垂直边距的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！