填充不影响一个孩子

Question

我正在制作响应式网页设计。但我的CSS知识可能会更好。我想在div上填充，但我不希望它影响标题。

查看此示例：

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

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

我也尝试设置十字架所在的div，但是由于标题向左浮动而方块正确，我无法在标题下和所有方块的左侧设置它。

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

Answer 2

您是否考虑过盒子模型？对CSS盒子模型进行一些研究，你会看到你的问题所在。

让我举个例子：

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

希望这会有所帮助。