Why does the background for some elements extend across the width of the DIV and some don't?

I have a rather colorful background, and to make the text legible, it's set on a semi-transparent background. H1, P both show the background the full width of the divs. spans and as however only show the background for where they are. This latter behavior is what I would prefer, definitely for the Headings, but also possibly for the paragraphs as well.

|-------------width of div-----------|
|{Header:BG fills whole div_________}|
|   {LINK}                           |
|{Paragraph:Same behavior as header_}|
|                       {SPAN}       |
|------------------------------------|

I'm using CSS strict HTML for preference.开发者_运维知识库

---

The difference between <h1>,<p>,<span> and <a> is that the first two are "display:block" by default, while last two are "display:inline".

Adding "display:block" property to your <a> and <span> should do it.

Response to comment:

I'll add a visual examle:

<div style="width:300px; border:1px solid #444">
  <div style="background:#999">This is a div</div>
  <a style="background:#999">This is a link</a>
  <h1 style="background:#999">This is a header</h1>
  <span style="background:#999">This is a span</span>
</div>

returns this

while

<div style="width:300px; border:1px solid #444">
  <div style="background:#999">This is a div</div>
  <a style="background:#999; display:block">This is a link</a>
  <h1 style="background:#999">This is a header</h1>
  <span style="background:#999; display:block">This is a span</span>
</div>

returns this

You are trying to achieve that, right?