List Element Margin and Padding Test

The purpose of this page is to alter the display of list elements (either the <ul> or <li> elements) by setting the margins or paddings of each to “zero (0).” Furthermore, each element is given a unique border and background color so that the viewer may determine the boundaries of each element. Viewing this page with a different browsers will demonstrate whether a browser has a default value for the margin or padding of each list element and moreover that browsers do not use the same default values. For example, Firefox has no margin for <ul>. Instead, it has padding on the left, and the bullets “reside” within the <ul>, rather than in the margin, as they do for Internet Explorer.

This paragraph is colored as the <ul> elements are.

This paragraph is colored as the <li> elements are.

Example 0

The following example has no explicit size declaration for the margin and padding.

One
Two
This line is deliberately long so that it will wrap. The quick brown fox jumped over the lazy dog. The quick brown fox jumped over the lazy dog. The quick brown fox jumped over the lazy dog.

Example 1

The following example has the <ul> margin set to 0.

One
Two
This line is deliberately long so that it will wrap. The quick brown fox jumped over the lazy dog. The quick brown fox jumped over the lazy dog. The quick brown fox jumped over the lazy dog.

The presentation of the list in Firefox, Opera, and Safari was unaffected by setting the <ul> margin to 0. In IE, the list shifted to the left (and, if I had not added padding to the <body> element the bullets would have been lost), indicating that IE has a left margin for <ul> elements.

Example 2

The following example has the <li> margin set to 0.

One
Two
This line is deliberately long so that it will wrap. The quick brown fox jumped over the lazy dog. The quick brown fox jumped over the lazy dog. The quick brown fox jumped over the lazy dog.

The presentation of the list was not affected in any of the tested browsers by setting the <li> margin to 0.

Example 3

The following example has the <ul> padding set to 0.

One
Two
This line is deliberately long so that it will wrap. The quick brown fox jumped over the lazy dog. The quick brown fox jumped over the lazy dog. The quick brown fox jumped over the lazy dog.

The list was shifted to the left in Firefox, Opera, and Safari by setting the <ul> padding to 0. In IE, the list was unaffected. This indicates that Firefox, Opera, and Safari have a left padding for <ul> elements.

Example 4

The following example has the <li> padding set to 0.

One
Two
This line is deliberately long so that it will wrap. The quick brown fox jumped over the lazy dog. The quick brown fox jumped over the lazy dog. The quick brown fox jumped over the lazy dog.

The presentation of the list was not affected in any of the tested browsers by setting the <li> padding to 0.

Example 5

The following example has the <ul> left margin set to 40 px, the <ul> padding set to 0 px, and the <li> margin and padding set to 0.

One
Two
This line is deliberately long so that it will wrap. The quick brown fox jumped over the lazy dog. The quick brown fox jumped over the lazy dog. The quick brown fox jumped over the lazy dog.

Example 6

The following example has the <ul> margin set to 0, the <ul> left padding set to 40 px, and the <li> margin and padding set to 0.

One
Two
This line is deliberately long so that it will wrap. The quick brown fox jumped over the lazy dog. The quick brown fox jumped over the lazy dog. The quick brown fox jumped over the lazy dog.

Home | Web Authoring | Contact Me