内边距的行为类似于边距

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

确保 2 个 div 的宽度（包括填充）（即，如果它的宽度为 25 像素，并且在其实际宽度为 35 像素的周围有 5 像素的填充）不超过容器 div 的宽度。