元素上的填充/边距/边框不会改变DIV高度

Question

这是一个非常简单的jsFiddle来演示我的问题：http://jsfiddle.net/ryandlf/mSmUv/4/

当元素具有顶部填充或边距并且它位于div内的第一行时，div不会考虑该填充或边距并将元素向下推。在大多数情况下，这不是问题，但是，例如，如果我有一个顶部边框和填充的按钮，边框的顶部将被切断，因为div没有考虑填充值。

除了在每个容器div元素上盲目地设置边距或填充并且希望我已经添加足够的内容以考虑可能受影响的任何内部元素之外，是否还有其他解决方法？

Answer 1

您与班级按钮的链接不是block元素，而是inline元素。通过向其添加dispaly: block来更改此默认行为，它将按预期工作。可在jsfiddle上获得证明。

总而言之，问题不在于div - 这是css的问题 - 内联元素忽略了边距和填充，因为它们不能“保留空间”。

更新：要回答您的评论，here is the solution您可能正在寻找

Answer 2

按钮元素为inline。要获得所需的行为，您可以设置display:inline-block。 查看here

Answer 3

尝试将以下内容添加到父div：

溢出：隐藏

我希望它有所帮助！