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.


Example 1

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

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.

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.

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.

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.

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.


Home  |  Web Authoring  |  Contact Me