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. span
s and a
s 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?
精彩评论