<form style="background-color:pink; height:100px">
<label for="button-test">Add your name here</label>
<input type="text" id="button-test" name="button" placeholder="add your name here">
<div style="display:inline-block; height:">
<input class="button-image" type="image" src="submit.png" alt="image button" width="40" height="40">
</div>
</form>
和CSS：
.button-image {
margin-left:20px;
float:right;
margin-top:px;
}
如果我没有在div容器中增加高度，并尝试在子元素“ button-image”中添加margin-top，则所有3个元素都将向下移动。但是，如果我在按钮图像的div容器中增加高度，则页边空白现在仅移动按钮图像元素，而其他两个保留在原处。
我故意将“ button-image”元素浮动起来，以便能够将其向下移动一点而不会移动其他2个元素。由于这3个都是内联块元素，因此请在其中任何一个上设置边距顶部，会将所有3个向下移动，因为它们需要保持文档流程。我认为使按钮图像元素浮动会使其脱离文档流，并且我将能够自由移动它而不会影响其他元素。但是我发现，如果div容器没有高度，当我将浮动的“ button-image”元素设置为margin-top时，所有3个元素都会再次向下移动。这是为什么？那不是应该浮动的元素，因此不在文档流中，因此不会影响其他人吗？为什么设置边距上限会使其他元素随之移动？如果我仅将1px的高度添加到div容器中，那么现在只有浮动元素移动了。
在这种情况下，有人可以解释一下身高有什么不同吗？
根据CSS 2.2规范：
10.6.7块格式上下文根的“自动”高度
...如果元素具有任何浮动后代，其后边缘的边缘低于元素的底部内容边缘，则高度会增加以包括这些边缘。
这与规则overflow:hidden块上包含浮点数的规则相同，类似于clearfix。
所有内联块元素都是块格式化上下文根，因此当您不指定高度时，此规则适用于它们，因为默认高度是自动的。
然后在第10节的最后，规范说：
“ inline-block”的基线是正常流中其最后一个线框的基线，除非它没有流入流线框，或者如果其“ overflow”属性的计算值不是“ visible”，则在这种情况下，基线是底部边沿。
在您的示例中，内联块仅包含浮点数，因此它没有流入线框，因此其基线是其下边距边缘。它的底部填充，边框和边距为零，因此其基线也是其底部内容边缘。
然后，您的标签和文本输入将它们的基线与该内联块底部内容边缘垂直对齐，因此，浮点的底部越低，则使它们保持垂直对齐的元素就越低。
但是，如果您为内联块指定高度，则其底部内容边缘不会向下移动以包围浮点数-即，浮点数会溢出内联块。标签和文本输入仍与内联块内容框的底部垂直对齐，但这仅与您指定的高度一样高。
为避免这种情况的发生，通常的技术是通过例如将inline-block设置为inline来打破内联元素之间的基线垂直对齐。 vertical-align:top
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句