html - 不影响一个 child 的填充物

Question

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

看这个例子:

我希望标题保持原样，但小方 block 在左侧有边距。

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

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

Here is a fiddle

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)。