Question

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

编辑：所以我创建了一个div id="show-collections-box"，它创建了一个228px×50px的灰色框。在div内部，我有一个链接，我在另一个div标记内用class="margin"编写了链接。当我应用保证金等级时，不是仅仅移动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;
            }

Answer 1

我不确定我确切知道您的具体问题是什么，所以这个答案仅基于目前发布的有限信息。

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

这听起来好像你可能会对如何应用保证金而感到困惑。填充元素。

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

的内容

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

的内容

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

您还没有解释问题所在。一旦您提供了关于您想要实现的更详细的解释，我将相应地编辑此答案。

修改

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

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

编辑2：

如果您只有一行文字无法包装和，您知道div的高度，只需添加等于div的高度的line-height {1}}。文本将始终垂直居中。

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。

html / css：margin和padding值继续应用于整个div而不仅仅是文本

3 个答案: