html/css:margin和padding值一直应用于整个div，而不仅仅是文本

Question

我在试图将一段文本居中放置在灰色框中时遇到问题，每次移动文本时，整个灰色框都会移动。我似乎想不通。问题出在"显示收藏框"及其内收藏文本的链接上。感谢您的帮助。

编辑：所以我做了一个div id="show-collections-box"，它创建了一个228px乘50px的灰色框。在div中，我有一个链接，我用class="margin"在另一个div标签中写入了该链接。当我应用margin类时，不是只向下移动div class="margin"内部的链接，而是将整个灰色框div id="show-collections-box"加上链接向下移动20px。

这里有一个jsfiddle，你可以看到20px的margin-top将整个灰色框向下推20px，而不仅仅是单词"collections"。

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;
            }

Answer 1

我不确定我到底知道你的具体问题是什么，所以这个答案只是基于迄今为止发布的有限信息。

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

这听起来真的很像你可能会对如何应用margin&填充元素。

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

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

问题出在"显示收藏框"和指向里面的集合文本。

你还没有解释问题所在。一旦你对你想要实现的目标做出了更详细的解释，我会相应地编辑这个答案。

编辑：

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

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

编辑2:

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

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

Answer 2

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

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

Answer 3

这是一把正在工作的小提琴http://jsfiddle.net/kasperfish/bfU3v/3/

不需要为此使用2个div。