How can I have an H1's margin be 10px from its container?
<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>
Starting from the a开发者_运维技巧bove code, how can I get the h1(Helloworld) to have a margin with the div, not the body?
This is the desired result: http://img176.imageshack.us/img176/7378/aaawj.png
I have found that if you set a padding on the container element you can avoid the problem you're experiencing. This should do it.
h1{
background-color: red;
}
div{
background-color:black;
height : 100px;
padding-top : 100px;
}
Try setting the margins explicitly?
Jessegavin's way works just fine. Another approach might be to position the h1 element (I'm not a big fan of that, but if you want alternatives, hey…)
For example, in your html, this works:
div {background-color:black; height: 100px}
h1 {position: absolute; top: 20px; background-color: red}
To get the full width on the element, as in your graphic, you probably need to apply the width attribute to the header too.
Here is the code you need, nice and easy :) :
h1{background-color: red; }
div background-color:black;
height 100px;
padding-top : 100px; }
Best of luck! It would be nice to center align the Hello World aswell I guess use:
h1{background-color: red; text-align;}
Best of luck!
加载中,请稍侯......
精彩评论