why ?!?

They have: 3 posts

Joined: Nov 2010

p { background-color:green; }
h1 { background-color:blue; }
div { background-color:red; }

h1 blue
p green

the run is attached , the questions:
* why the red color appear in the middle only ?
* why not the red color appear from the four sides ?
What is the rule applied ?

Than you very much

AttachmentSize
example.png2.22 KB
Megan's picture

She has: 11,421 posts

Joined: Jun 1999

The red is showing in the margin below the h1. By default h1 has a margin-bottom applied (not sure how big the default is). Then the paragraph starts after that margin. Backgrounds don't extend to margins, only the padding area. The red doesn't show all the way around because those elements don't come with default margins on the sides or top, just on the bottom.

Is that a good enough explanation? It would help to familiarize yourself with the CSS box model.

Want to join the discussion? Create an account or log in if you already have one. Joining is fast, free and painless! We’ll even whisk you back here when you’ve finished.