填充行为像边距

Question

我有一个包含两个并排的 div 的容器 div。它们完美地适配并正确显示。但是，当我尝试在左侧的 div 上添加左边距时，它不仅会将该 div 的内容向右移动，而且实际上还会将右侧的 div 内容也向右移动！如果我添加超过 20px 的任何左边距，它实际上会将右侧的 div 移动到下一行！这到底是怎么回事？以下是 CSS 和 HTML。容器 div 名为 "hwrapper"，左侧的 div 名为 "rbox"，右侧的 div 名为 "card"。如我所说，将 "rbox" 左侧添加内边距会将 "card" 的内容也向右移动。我该如何解决这个问题？

    #header {
    height:800px;
    width: 100%;
    margin-top: 0px;
    background:url(/assets/header-tail.gif) 0 0 repeat-x #f7f7f7;
    }
#hwrapper {
    width: 1000px;
    height: 600px;
    margin: 0 auto;
    text-align: center;
    }
#header .logo {
    padding: 3px;
    text-align: center; 
    }
#rbox {
    background:url(/assets/hredbox.png) 0 0 no-repeat;
    height: 420px;
    width: 274px;   
    float: left;
    text-align: left;
    padding-top: 10px; 
    }
#card {
    margin-left: auto;
    height: 420px;
    width: 720px;
    background:url(/assets/silverbackh360b0.png) 0 0 no-repeat;
    float: right; 
    text-align: left;
    padding-top: 20px;
    }

HTML:

    <div id="header">
    <div class="logo"><%= link_to image_tag("etlogo.png",alt:"Logo"), 'index.html' %></div>
    <div id="hwrapper">
        <div id="rbox"><span><center>Some Text</center></span><br><p><br>
            <dl>
            A list goes here.
            </dl><br><p><br>
                <span><center>Log In Here</center></span>
        </div>
        <div id="card">Lots more text in here.
        </div>
    </div>
</div>

任何帮助都将不胜感激，因为我以为填充只影响块内的元素，而边距影响块之间的关系。

- Blind Fish

---

在Chrome和Firefox中进行测试，结果相同。 - Blind Fish

你知道当你给一个 div 添加 padding 时，它会增加整个 div 的宽度吗？我的假设是通过添加 padding，你实际上使得两个内部的 div 的宽度大于外部 div 的宽度，这导致它们向下移动。 - mcriecken

等等，什么？通过添加填充来增加区域的宽度？你确定吗？这完全没有意义。如何在不弄乱周围区域的情况下定位区域内的内容？ - Blind Fish

内边距和外边距都会影响其他元素的布局。我建议阅读一下盒模型相关的内容 - https://developer.mozilla.org/en-US/docs/Web/CSS/box_model - 此外，没有必要使用<center>标签，因为它已经被弃用且是不良实践。 - David Bradbury

我刚刚在阅读这个，谢谢。那是我听过的最不符合直觉的事情。多么糟糕的规范啊。我想解决方案是在那个 div 中再放一个宽度更窄的 div，并添加左边距。真是胡说八道。不过还是谢谢你的回复。 - Blind Fish

Answer 1

我也遇到了这个问题。请确保使用box-sizing。尝试应用以下代码：

*, *:before, *:after {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

这样可以在 div 中使用填充而不扩展其宽度。

- Scott Whit

Answer 2

我是一名有用的助手，可以为您进行文本翻译。以下是需要翻译的内容：

我遇到了类似的问题。我的HTML代码如下：

<div style =
" padding-left  : 12px;
  position      : absolute;
  left          : 0px;
  width         : 120px;
  border        : solid 1px RED;

令我惊讶的是，当我将padding-left从0px更改为12px时，红色右边框向右移动了12px。非常恼人。

通过添加'box-sizing: border-box'到样式中，我成功阻止了这种情况发生。这个烦人的右边框移动问题已经解决了。

<div style =
" padding-left  : 12px;
  box-sizing    :  border-box;

  position      : absolute;
  left          : 0px;
  width         : 120px;
  border        : solid 1px RED ;

所以，“box-sizing:border-box”解决了这个问题。 我最初发现原始行为如此反直觉的原因是，我正在使用绝对定位，因此我认为“width:120px”会将右边框绝对定位在120px处。如果我说：“right:120px;”，我假设它会做类似的事情，但那意味着距离页面右边缘120px。

总之，padding-left：影响右边框的位置，如果： 1.您使用'width：'（而不是'right：'）和 2.您没有指定“box-sizing：border-box”。

- Panu Logic

Answer 3

请确保两个 div 的宽度，包括内边距（即如果其宽度为 25px，四周都有 5px 的内边距，则实际宽度为 35px），不超过容器 div 的宽度。

- Bucthree

Answer 4

只需从具有此填充的 div 的宽度中减去填充（左右）即可，一切都应该正常。

- Petr Šrámek