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

【问题标题】：Padding/Margin/Border On Element Does Not Change DIV Height元素上的填充/边距/边框不会改变 DIV 高度
【发布时间】：2012-09-02 20:16:23
【问题描述】：

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

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

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

【问题讨论】：

标签： html css

【解决方案1】：

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

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

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

【讨论】：

在这种情况下如何设置宽度以适合文本？
float left 意味着 div 中的所有内容都必须有一个 float 元素，否则它将无法正确定位。内联块工作完美，但IE7有解决方案吗？
不是真的...基本上我的意思是，如果包含说按钮的 div 有其他元素...可能是图像或其他东西，我将浮动分配到底部而不是图像，它不会正确定位。我还必须在图像中添加左浮动，这使得排列元素变得混乱。
使用浮点数不会让人困惑，这实际上是标准的做法。如果您愿意，您也可以使用 float: right ，并将其与 margin 结合以获得所需的空间。如果您有许多需要定位的元素，您可能需要以某种方式将它们与 div 分组并分配 float: left 给这样的包装器

【解决方案2】：

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

【讨论】：

【解决方案3】：

尝试在父 div 中添加以下内容：

溢出：隐藏

希望对你有帮助！

【讨论】：