Div边距设置不正确

Question

我正在尝试使用div来定位文本，但它运行不正常！

.background
{
    background-image:url(bg.png);
    width:600px;
    height:500px;
    margin-top:0px;
    margin-left:0px;
}

.head1{
    font-size:18px;
    font-family:calibri;
    font-style:italic;
    color:#d45151;
    margin-top:100px;
    margin-left:100px;

}

.background 是div的背景图片，而 .head1 是.background div中的文本。 你可以在html部分看到它！

<div class="background">
<div class="head1">There are 3 CRUCIAL things that you need to remember...</div>
<div class="points">
</div>
</div>

类head1的文本显示在定义的位置！但它也带来了它的背景图像！ 这看起来很安静，所以我拍了一张截图！请检查一下！ 也许我的CSS编码很差。请帮帮我。

Answer 1

将overflow: auto添加到父div。

.background {
    background: red;
    width:600px;
    height:500px;
    overflow: auto;
}

.head1 {
    font-size:18px;
    font-family:calibri;
    font-style:italic;
    color:#d45151;
    margin-top:100px;
    margin-left:100px;
}

http://jsfiddle.net/L7q5g6yu/2/

.background上的零边距可以被移除，零边距是div的默认值。

OR

你可以删除内部div，看看这个代码，如果你需要内部div只是为了对齐文本，它也是一样的。

<div class="background">
    There are 3 CRUCIAL things that you need to remember...
</div>

<style>
.background {
    background: green;
    width:500px;
    height:400px;
    overflow: auto;
    padding: 100px 0 0 100px;
    color:#d45151; 
    font-style: italic;
}
</style>

http://jsfiddle.net/L7q5g6yu/3/

Answer 2

使用以下样式

.head1 {
font-size:18px;
font-family:calibri;
font-style:italic;
color:#d45151;
padding: 100px 0 0 100px;
}