paragraphs

coloring and sizing blocks of text

page 1 of 1

page 1
• coloring paragraphs
• setting margins

coloring paragraphs

We've seen the section on coloring DIVs that we must add to the style definition of a DIV a BORDER-WIDTH property to get NN4.7 to "box in" the DIV and not just color only behind the text. Only coloring directly behind the text results in a raggedy, uneven look. We want blocks of color. Below is the code for boxing in a P tag.

<p style="background:blue;margin-left:30%;margin-right:30%;border-width:1px;"> here is some text and it is very big and let's see
what happens to it when we fix up the div with margins
instead of widths.
</p>
<p style="background:blue;margin-left:30%;margin-right:30%;border-width:1px;">
here is some text and it is very big and let's see
what happens to it when we fix up the div with margins
instead of widths.
</p>

we see in NN4.7:	we see in IE5.0:
we see in NN6.0:

The two representations are similar, except that NN4.7 adds the black border at a sizeable distance from the colored paragraph area. Of course, we put that border there so that NN4.7 would box in the color. It's a standard hack I've been using to contruct style definitions that translate across all three browsers. We can always color the border the same as the background to make it invisible. Note the default spacing between the paragraph elements.

setting margins

Let's set the MARGIN-TOP and MARGIN-BOTTOM properties for the styles to 0 pixels. The goal here is to get a continuous blocks of colored text.

we see in NN4.7:	we see in IE5.0:
we see in NN6.0:

The three browsers react well to the MARGIN property. We've caused the separation between the paragraph elements in NN4.7 with the BORDER property. If one was not coloring behind the paragraph text, or instead using a DIV with BACKGROUND color to wrap P tags instead, one would get much better control over paragraph formatting.