html/css : 边距和填充值继续应用于整个 div 而不仅仅是文本答案

【问题标题】：html/css : margin and padding values keep applying to entire div instead of just the texthtml/css : 边距和填充值继续应用于整个 div 而不仅仅是文本
【发布时间】：2011-10-03 08:33:41
【问题描述】：

我在尝试将一段文本置于灰色框内居中时遇到问题，每次移动文本时，整个灰色框都会移动。我似乎无法弄清楚这一点。问题在于“show-collections-box”和其中的集合文本的链接。感谢您的帮助。

编辑：所以我创建了一个div id="show-collections-box"，它创建了一个 228 像素 x 50 像素的灰色框。在div 内我有一个链接，我用class="margin" 将链接包装在另一个div 标记内。当我应用边距类时，不仅将div class="margin" 内的链接向下移动，整个灰色框div id="show-collections-box" 加上链接向下移动了20px。

这是一个 jsfiddle，您可以看到 20px margin-top 将整个灰色框向下推 20px 而不仅仅是“收藏”这个词。

http://jsfiddle.net/bfU3v/

HTML

      <div id="show-collections-box">
         <div class="margin"><a href="www.example.com">Collections</a></div>
      </div>

CSS

    #show-collections-box {
        border-bottom: solid 1px #ececec;
        border-left: solid 1px #ececec;
        background: #faf9f9;
        width: 228px;
        height: 50px;

    }
    .margin {
           margin-top: 20px;
            }

【问题讨论】：

如果您不提供更多详细信息，我不明白为什么简单的 text-align: center 不起作用。另外，您可以尝试设置一个 jsfiddle 页面。
嗨，文本对齐中心不起作用，因为我需要将文本“集合”在 height=50px 灰色 div 中上下居中

标签： css html

【解决方案1】：

我不确定我确切地知道您的具体问题可能是什么，所以这个答案仅基于迄今为止发布的有限信息。

...每次我移动文本时，整个灰色框都会移动。

这听起来你可能对如何将边距和填充应用于元素感到困惑。

如果您将margin 应用于div，则该边距位于div 的外部，从而在页面上移动它。边距不应用于div 的内容。

如果将padding 应用于div，则该填充正好位于div 的边界内，从而将其内容推离div 的边界。填充不应用于div 的内容。

问题在于“show-collections-box”和指向里面的集合文本。

你没有解释问题是什么。一旦您对您想要实现的目标提供更详细的说明，我将相应地编辑此答案。

编辑：

我相信可能有更好的方法来实现您的目标，但要回答您的具体问题，我所做的只是完全删除内部 div 并将 20 像素作为顶部填充添加到外部 div。（应该注意，填充将添加到 div 的大小。即，一个 50 像素高的 div 顶部填充为 20 像素最终将是 70 像素高）

http://jsfiddle.net/bfU3v/5/

编辑 2：

如果您只有一行不会换行的文本并且您知道div 的高度，只需添加一个等于div 高度的line-height。文本将始终垂直居中。

http://jsfiddle.net/bfU3v/7/

【讨论】：

您好，我尝试提供更多信息，如果我需要解释其他内容，请告诉我。再次感谢。
@trying_hal9000，我用更新的小提琴和替代解决方案回答了您的具体问题。

【解决方案2】：

将display: inline-block; 添加到容器中。

如果由于某种原因您需要容器不是inline-block，请添加第二个内部包装，使用width: 100%; 和display: inline-block;。

【讨论】：

【解决方案3】：

这是一个工作小提琴 http://jsfiddle.net/kasperfish/bfU3v/3/

不需要为此使用 2 个 div。

【讨论】：