html - 不影响一个孩子的填充物

Question

我正在做一个响应式网页设计。但我的 CSS 知识本来可以更好。我想要一个 div 上的填充，但我不希望它影响标题。

看这个例子：

我希望标题是这样，但小方块在左侧有一个边距。

我尝试设置填充，然后使用相对定位重置标题位置。但我不喜欢这种解决方案，因为标题超出了必要的范围。

我还尝试在十字架所在的位置设置一个 div，但我无法将它放在标题下方和所有方块的左侧，因为标题向左浮动，方块向右浮动。

这是一个小提琴

HTML

<div id="siteContainer">
    <div id="titleContainer">
        <h1 id="title">This is the long title</h1>
    </div>

    <div class="image"></div>
    <div class="image"></div>
    <div class="image"></div>
    // more...
</div>

CSS

#siteContainer {
    max-width: 800px;
    margin: auto;
}
#title {
    display: inline-block;
}
#titleContainer {
    height: 100px;
    margin: 10px;
    float: left;
}
.image {
    width: 100px;
    height: 100px;
    margin: 10px;
    background: #DDCCAA;
    float: right;
}

Answer 1

无论您希望容器左侧的填充是什么（100px），都可以text-indent在标题上设置为负值（-100px）。

Answer 2

你考虑过盒子模型吗？对 CSS 盒子模型做一些研究，你会发现问题出在哪里。

让我给你举个例子：

如果你有一个宽度为 100px 的 div 并添加了一个 10px 的 padding，那么你的 div 的宽度将是 120px，两边将从 padding 中取 10px，你可以通过两种方式解决这个问题，一种是使 div 宽度较小的“80px”，第二个是使用 box-sizing:border-box;

希望这有帮助。