Question

我正在使用我的新投资组合网站（http://www.marcial.is），我对填充问题感到困惑，我无法解释。我构建布局的方式是每行内容包括外包装和内包装。例如：

<header class="global-header" role="banner">
    <div class="header-inner">...</div>
</header>

外包装是100％宽。内包装具有最大宽度，以自动边距为中心。内部包装器也有一定百分比的填充，以允许我按照我在每一行上看到的内容（例如上面的标题示例）。以下是我的SCSS示例：

.global-header {
    background: #007bc4;
    text-align: center;
    text-shadow: 0 1px 1px rgba(#000, 0.2);
    border-bottom: 1px solid rgba(#000, 0.15);
    padding: 1.25em 0.625em 2.5em;
    @include at-break($breakMedium) {
        padding: 3.125em 1.25em 6.25em;
    }
    @include at-break($breakLarge) {
        padding: 3.125em $gutter 6.25em;
    }
}

.header-inner {
    max-width: $maxWidth; 
    margin: 0 auto;
    @include at-break($breakSmall) {
        margin: 0 18.181818181818%;
    }
    @include at-break($breakMedium) {
        margin: 0 11.764705882353%;
    }
    @include at-break($breakLarge) {
        margin: 0 17.391304347826%;
    }
}

问题在于内包装上的百分比填充似乎继续增加，尽管内包装已经达到了应用的最大宽度。如果达到最大宽度，为什么内包装的填充会随着视口宽度而继续增加？

Answer 1

如果达到最大宽度，为什么内包装的填充会随着视口宽度而继续增加？

因为，http://www.w3.org/TR/CSS21/box.html#padding-properties：

百分比是根据生成的框包含块的宽度计算的，[...]

您的外div在这里提供了containing block。

您需要在此处使用.header-inner内的其他元素，并将填充应用于，以便设置.header-inner的{{1}}成为该内部元素的包含块。

获得最大宽度后，CSS百分比水平填充与元素无关？

1 个答案: