Collected by
Elizabeth Janson
Home Page

List Spacing

 

Remember our simple HTML list, like the one shown below. 

<UL TYPE="square"; style="background: pink;">
<LI>List Item 1
<LI>List Item 2
</UL>
When rendered by your browser, and placed inside a coloured table, this simple HTML element looks like this:
  • List Item 1
  • List Item 2

Two common questions asked by beginning HTML coders are:

  • Can I customize the bullets used in my list?
  • Can I control the amount of white space above and below my list?
With basic HTML, the answer to both questions is "No, you can't." With style sheets, the answer to both is "Yes, absolutely."

Under CSS every HTML element is contained in a "block," a rectangle that surrounds the element. Go here for a very detailed explanation of the 'block' concept.

The block itself has style properties that you can adjust, letting you control the amount of white space around the element. For example, if we displayed the block surrounding our HTML list, it would look something like this:

To show the relation of our list to the surrounding text, we've also added a paragraph of text above and below our list, and we've set the background color property of these paragraphs to clearly show where the bullet list element begins.

<P>Text above our list ending with </P>

  • List Item 1
  • List Item 2

<P>Text below our list ending with </P>

The amount of white space around our bullets is controlled by two properties: padding and margin. The element's padding defines the amount of white space between our bullets and the block border. The element's margin defines the amount of white space between block border and the text above and below the list itself. This is the space we want to adjust to customize our bullet list.

To do this, we can use the STYLE attribute to set a pair of properties called "margin-top" and "margin-bottom." We could use the single property "margin" to define both the top and bottom margins at once, but some versions of Internet Explorer don't handle this property correctly, so we'll set the top and bottom margins separately.

Here's the code: 
<P STYLE="background-color:skyblue">Text above our list</p>
<UL STYLE="margin-top:0px; margin-bottom:0px; 
		background: pink;">
<LI>List Item 1, margin-top:0px;
<LI>List Item 2, margin-bottom:0px;
</UL>
<P STYLE="background-color:skyblue">Text 
  below our list</p>
Setting "margin-top:0px" tells the browser to set the top margin to zero pixels. If we were using this list in an actual Web page, we'd probably use some value other than zero. But for this example, a zero value helps to dramatize the way we're changing the tag's behavior.

This makes our list appear as shown below.

<P>Text above our list ending with </P>

  • List Item 1, margin-top:0px;
  • List Item 2, margin-bottom:0px;

<P>Text below our list ending with </P>

Notice that the amount of white space between our list and the surrounding paragraphs hasn't changed yet. That's because our paragraphs also have margins associated with them. To fully control the white space around our list, therefore, we also need to apply a style to each of our paragraphs. The code below shows how to do this.

<P STYLE=" margin-bottom:0px; background-color:skyblue">Text 
  above our list, margin-bottom:0px;</p>
<UL STYLE="margin-top:0px; margin-bottom:0px;
	 style="background: pink;">
<LI>List Item 1
<LI>List Item 2
</UL>
<P STYLE="margin-top:0px; background-color:skyblue">Text 
  below our list, margin-top:0px;</p>
Now the list appears as shown below.

<P STYLE=" margin-bottom:0px; background-color:skyblue">Text above our list</P>

  • List Item 1, margin-top:0px;
  • List Item 2, margin-bottom:0px;

<P STYLE="margin-top:0px; background-color:skyblue">Text below our list</p>

Notice that we've completely eliminated the white space around the bullet list. This effect will work under Internet Explorer Version 4 and higher, as well as under Netscape Navigator Version 6. Version 4 of Netscape doesn't support this effect.

This example only uses the P items Now the list appears as shown below.

<P STYLE=" margin-bottom:0px; background-color:skyblue">Text above our list</P>

  • List Item 1, pink only style item
  • List Item 2,

<P STYLE="margin-top:0px; background-color:skyblue">Text below our list</p>
So both lots of margins must be listed.

Email
CSS begins here
Back to bullets or on to markers.

This page is part of Elizabeth Janson's web site

http://www.oocities.org/elizatk/index.html

My other sites are the Anglican Parish of Northern Mallee,
Tetbury residents in the Eighteenth Century
my Australian Family History and Barrie, our Family Poet.