Html 不影响一个子级的填充

我正在做一个反应迅速的网页设计。但我的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框模型做一些研究，你就会发现你的问题所在

让我举个例子：

如果有一个宽度为100px的div，并添加一个10px的填充，则div的宽度将为120px，两侧将从填充中获取10px，可以通过两种方法解决此问题，一种是使div宽度小于“80px”，另一种是使用框大小：border box

---

希望这能有所帮助。

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

文本缩进值。
这确实不清楚。怎么不清楚？我希望得到准确的结果，就像在左侧添加一个填充（比如100px），但我希望标题与示例中的现在一样。填充解决方案是一个很好的解决方案。但它不能像我希望的那样工作，因为它也会影响标题。这就是问题的症结所在。你试着在容器上填充左边，然后在标题上填充相对位置。容器上的空白（100px）和标题（-100px）上的负文本缩进怎么样？
#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;
}