如何让容器查询的inline-size包含内边距？

我给header元素设置了padding，但容器查询在计算宽度时并未将其纳入。比如当元素总宽度为800px时，容器查询实际用的是800px - 2rem×2（容器两侧内边距）=734px来判断，导致在734px就触发了<800px的查询，而不是总宽度到800px时才触发。试过box-sizing: border-box没用，直接把查询值改成734px又会影响其他无内边距的容器。

解决方法 #

给header套一层外层容器，把container-type移到外层容器上，外层容器不设置padding，header保留自身的padding。这样容器查询就会基于外层容器的宽度（也就是header的总宽度）来计算。

修改后的代码示例：

HTML

<div class="header-container">
    <header>
        <h1>hello world</h1>
    </header>
</div>

CSS

.header-container {
    container-type: inline-size;
    max-width: 1180px;
    margin: 0 auto;
}

header {
    min-height: 500px;
    font-size: 3rem;
    padding: 2rem;
}

@container (width < 800px) {
    header {
        font-size: 2rem;
    }
}

原理说明 #

外层容器作为容器查询的载体，它的宽度就是header的总宽度（因为header的padding是自身的内边距，不会影响外层容器的宽度计算）。此时容器查询的width值就对应header的总宽度，当外层容器宽度小于800px时，就会触发样式变更，完全符合需求，同时不会干扰其他无内边距的容器查询。

内容的提问来源于stack exchange，提问作者CubeFrikandel