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 [=29] 中的文本=]. 你可以在html部分看到它！

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

classhead1 的文本显示在定义的位置！但它也带来了背景图片！看起来很混乱，所以我截图了！请检查一下！也许我的 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/

Answer 2

使用以下样式

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

Div 边距设置不正确

Div margin not setting properly

html

css

margin