Question

<html>
<head>
<style type="text/css">
h1{
background-color: red;
margin-top : 10px;
}
div{
background-color:black;
height : 100px;
}
</style>
</head>

<body>
<div>
<h1>Hello World!</h1>
</div>
</body>

从上面的代码开始，我怎样才能让h1（Helloworld）有一个div而不是body？

这是理想的结果：http://img176.imageshack.us/img176/7378/aaawj.png alt text

Answer 1

我发现如果在容器元素上设置填充，则可以避免遇到的问题。这应该做到。

h1{
    background-color: red;
}
div{
    background-color:black;
    height : 100px;
    padding-top : 100px;
}

Answer 2

尝试明确设置边距？

Answer 3

Jessegavin的方式很好。另一种方法可能是定位h1元素（我不是那个的忠实粉丝，但如果你想要替代品，嘿......）

例如，在您的html中，这有效：

div {background-color:black; height: 100px}
h1 {position: absolute; top: 20px; background-color: red}

要获得元素的完整宽度（如图形所示），您可能还需要将width属性应用于标题。

Answer 4

以下是您需要的代码，简单明了:)：

  h1{background-color: red; }

  div background-color:black;
        height  100px;
        padding-top : 100px; }

祝你好运！将中心对齐Hello World以及我猜想使用它会很好：

h1{background-color: red; text-align;}

祝你好运！

如何从容器中获得H1的余量为10px？

4 个答案: