Question

HTML / CSS新手在这里。我想创建一个div（蓝色），顶部是h1（红色）。 h1应该具有30px的余量。 h1以下是另一个div（绿色）。下面的代码“应该”有效，但我得到的结果是h1左边，底部和右边只有30px的边距。顶部没有保证金。这是为什么？

要了解我的意思，您可以在http://www.w3schools.com/css/tryit.asp?filename=trycss_default

处尝试此代码

谢谢！

<!DOCTYPE html>
<html>
<head>
<style>

body
{
padding:0px;
margin:0px;
color: rgb(0,0,0);
}

div#frame1
{
padding:0px;
margin:50px auto;
width:500px;
background-color: rgb(0, 0, 255);
}

h1
{
padding:0px;
margin:30px;
text-align:center;
background-color:rgb(255, 0, 0);
}

div#frame2
{
padding:0px;
margin:0px;
background: rgb(0, 255, 0);
}

</style>
</head>

<body>

<div id="frame1">

<h1>Hello world</h1>

<div id="frame2">
Hello again
</div>

</div>

</body>
</html>

Answer 1

那是由于collapsing margins。要更正此行为，请将overflow:auto（或边框）添加到frame1 div：

div#frame1 {
    padding:0px;
    margin:50px auto;
    width:500px;
    background-color: rgb(0, 0, 255);
    overflow:auto;
}

<强> jsFiddle example

Answer 2

您的标题确实有30px的保证金。问题是边距不包含背景颜色。如果您希望延伸背景颜色而不是边距，则需要使用padding。

padding:30px;

Answer 3

您应该将overflow: auto;添加到div#frame1样式中，它应该修复它。否则会出现崩溃边缘。

CSS应为：

#frame1 {
   padding:0px;
   margin:50px auto;
   width:500px;
   background-color: rgb(0, 0, 255);
   overflow: auto;
}

旁注（我不认为这会影响任何事情，但可能会这样）：在CSS中调用div#frame1是多余的。只需拨打#frame1即可。

CSS：div中的标题边距

3 个答案: