what do the background refer to in the box model (content, padding, border and margin)?
in other words, which part of the box model will be set to display a background color if i set it to green?
and is it just block elements (div, heading etc) that applies to the box model? do inline elements (span, text) got padding, border and margin too?
The elements full occupancy, not including space occupied by margins. You could test this with the following markup/css:
.block { margin:5px; padding:0; width:25px; height:25px;
background-color:orange; float:left; }
<div class="block"></div>
<div class="block"></div>
Render that, and you'll find a total of 10px between the orange boxes - our margins.
Inline elements do have padding and margins too, but you can't always use them the same way, since they're inline, not block-level.
This small chart will demonstrate how a box appears within the browser:
box-chart http://img132.imageshack.us/img132/2692/boxchart.jpg
As you can see, the margin is the space between the box itself and any content that might be surrounding it. The border is simply a line around the box. The padding is the space between the edge of the box and the content within the box. Any backgrounds you set will fill the entire box (within the borders) still maintaining the margin (blank space) around the box.
Just about every element can use margin, background, and border I believe. However, some elements do not support padding unless it is block-level, because it would basically be the exact same thing as margin. You can always test out different styles to see what works and what doesn't and how things get moved around based on the styles you set up.
