html - 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 的默认值。

或

你可以删除内部 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/