[英]Vertical space between inline-block elements smaller than font
First, I know about the letter-spacing problem that causes horizontal spaces between inline-block elements. 首先,我知道字母间距问题导致内联块元素之间的水平空格。 This is not another of those questions.
这不是另一个问题。
Instead, I have a full-width inline-block element with a small height, and I want its next neighbor to abut it directly from below, but there's always a space between them that looks to be about the line-height. 相反,我有一个高宽度的内嵌块元素,我希望它的下一个邻居直接从下面邻接它,但它们之间总是有一个看起来与行高有关的空间。
I've tried every combination of vertical-align, font-size, and line-height I can think of. 我已经尝试了我能想到的垂直对齐,字体大小和线高的每种组合。 Anyone have a creative way of removing that whitespace?
任何人都有创造性的方法去除那个空白?
.blue{background:blue;} .red{background:red;} .blue,.red{ width: 100%; height:5px; display: inline-block; }
<div class="blue"></div> <div class="red"></div>
The font-size
of the parent element, in this case body
, affects the inline-block
divs, essentially treating them like text. 父元素的
font-size
(在本例中为body
)会影响inline-block
div,基本上将它们视为文本。
inline-block
with no white space? inline-block
没有空格? The parent element, body
in this example, is given font-size: 0
, you would then give the child elements a font-size
: 在此示例中,父元素
body
是font-size: 0
,然后您将为子元素提供font-size
:
body { font-size: 0; } .blue{background:blue;} .red{background:red;} .blue,.red{ width: 100%; height:5px; display: inline-block; }
<div class="blue"></div> <div class="red"></div>
I can't think of a practical use of this, use display: block
. 我想不出这个的实际用法,使用
display: block
。
Float them? 漂浮他们?
.blue{background:blue;} .red{background:red;} .blue,.red{ width: 100%; height:5px; display: inline-block; float:left; }
<div class="blue"></div> <div class="red"></div>
if you want to use 100% width, then why not use display: block
instead of inline-block. 如果你想使用100%宽度,那么为什么不使用
display: block
而不是inline-block。
Note: If you want to use float, its a good practice to clear it after. 注意:如果你想使用float,它是一个很好的做法,以后清除它。 while using float, display property is not required as Float takes care of it.
使用float时,不需要显示属性,因为Float会处理它。
.blue{background:blue;} .red{background:red;} .blue,.red{ height:5px; display: block; }
<div class="blue"></div> <div class="red"></div>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.