内嵌块元素高度问题 [英] Inline-block element height issue

问题描述

我有一个简单的例子，其中外部 DIV 包含内部 DIV ，其中有

display：inline-block; 。

因为我已经设置了内部div的高度，所以我期望外部div具有相同的高度作为内部分区。相反，外部的div比较高，正如你从小提琴中看到的那样。问题：为什么会发生这种情况，怎样才能填充外部div而不显式设置其高度？

我的目标是让外部div根据内部高度扩展和缩小。 / p>

  .outer {background-color：red;}。inner {display：inline-block; width：480px;身高：140px; background-color：green;}  

< div class = 外 > < div class =inner>< / div>< / div>

.inner div有 display：inline-block

解决方案 $ C>。这意味着它需要围绕它的内联格式化上下文。内联布局会生成 struts ，这为下游提供了空间。如果你在 .inner 元素旁边放置一个字符： http://jsfiddle.net/bs14zzeb/6/

默认 vertical-align 是将 inline-block 框的底部边缘与周围文本的基线对齐。 即使没有周围的文本，布局引擎仍然需要为整行文本留出空间。

这就是为什么这些答案是建议你玩 vertical-align 属性。将它设置为 vertical-align：top ，正如一个答案所示，它告诉布局引擎对齐 inline-block 框与线框的上边缘。在这里，由于线条高度小于140px，因此可以摆脱底部多余的空间。但是，如果一条线的高度比这更高，那么您仍然会在下面留出额外空间： http：// jsfiddle .net / bs14zzeb / 9 /


I have a simple example in which an outer DIV contains an inner DIV which has
display: inline-block;.
Because I have set the height of the inner div, I expect the outer div to take on the same height as the inner div. Instead, the outer div is slightly taller, as you can see from the fiddle. Question: Why is this happening and how can I "fill up" the outer div without setting its height explicitly?
My goal is to have the outer div expand and shrink based on the height of the inner.

.outer {
  background-color: red;
}
.inner {
  display: inline-block;
  width: 480px;
  height: 140px;
  background-color: green;
}

<div class="outer">
  <div class="inner"></div>
</div>

解决方案

Your .inner div has display: inline-block. That means it needs an inline formatting context around it. Inline layout produces struts, which make room for descenders. You can see how it fits if you put a character next to the .inner element: http://jsfiddle.net/bs14zzeb/6/

The default vertical-align is to have the bottom edge of the inline-block box lined up with the baseline of the surrounding text. Even if there is no surrounding text, the layout engine still has to make room for an entire line of text.

That's why these answers are suggesting that you play with the vertical-align property. Setting it to vertical-align: top, as one answer suggests, tells the layout engine to align the top edge of the inline-block box with the top edge of the line box. Here, since the line height is less than 140px tall, it gets rid of the extra space on the bottom. But if the height of a line is taller than that, you'll still have extra space underneath: http://jsfiddle.net/bs14zzeb/9/

这篇关于内嵌块元素高度问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！