CODEWITHSUNDEEP
htmlcss
cdxf
cdxf

Reputation: 5648

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 above 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 alt text

Upvotes: 0

Views: 149

Answers (4)

Otroberts
Otroberts

Reputation: 347

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!

Upvotes: 0

Ben
Ben

Reputation: 7597

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.

Upvotes: 1

jessegavin
jessegavin

Reputation: 75650

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;
}

Upvotes: 2

Sprintstar
Sprintstar

Reputation: 8159

Try setting the margins explicitly?

Upvotes: 1

Related Questions