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>

任何帮助都会受到高度赞赏，因为我认为填充只会影响一个块内的元素，并且边距会影响块之间的关系。

Answer 1

我遇到了类似的问题。我有以下 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：影响右边框的位置，如果

您使用“width:”（而不是“right:”）和
您没有指定“box-sizing:border-box”

Answer 2

确保2个div的宽度，包括填充（即如果它的25px宽，5px的填充在其实际宽度为35px的范围内）不超过容器div的宽度。

Answer 3

使用此填充从div的宽度中减去填充（左和右），一切都应该没问题。

填充行为类似于保证金

3 个答案: