BYOWebsite: Margins & Padding – How They Affect List Items

Posted July 4, 2010 by Kathy Davie in Author Resources, Building Your Own Website

Pinterest pin for Margins & Padding - How They Affect List Items

Revised as of:
6 Feb 2017

It’s finally sunk in. I’ve kept fussing about with margins and padding trying to the get the CSS to tell the browser how much distance I want between the left-margin and the start of each nested level for the bullet…and I’ve finally got it!

Your only real concern is with margin-left in the CSS ul and padding-left in the li.

Margin-Left

Margin-left is set in the ul and affects the distance from the left margin (left side of page) to the start of the bullet on a list or line item.

In table 1, each row increases the margin-left with the visual results.

Table 1. Increasing Margin-Left
ul{ margin-left: 5px; }	Line item in a list
ul{ margin-left: 35px; }	Line item in a list
ul{ margin-left: 65px; }	Line item in a list

In figure 1, the three-level list shows how a high number in `margin-left` increases the distance between the left margin and the bullet.
	Fig. 1. A high number in margin-left (in the CSS) increases the distance between the left edge of the page and the bullet/marker.

Padding-Left

Padding-left is set in the CSS li and affects the distance between the bullet marker and the starting text of the line item.

In table 2, the ul margin-left stays the same while the li padding-left increases with the resulting changes in the right column.

Table 2. Increasing Padding-Left
ul{ margin-left: 5px; } li{ padding-left: 5px; }	Line item in a list
ul{ margin-left: 5px; } li{ padding-left: 35px; }	Line item in a list
ul{ margin-left: 5px; } li{ padding-left: 65px; }	Line item in a list

In figure 2, the three-level list shows how increasing the `padded-left` in the `li` puts more distance between the bullet and the start of the line item text.
	Fig. 2. A low number in padding-left (in the CSS) decreases the distance between the bullet/marker and the start of text in the HTML while a higher number increases the distance.

Fun With Your Author Website is…

…an opportunity to do a bit more with your author’s website or blog and have some fun with it. All while learning something about HTML (hypertext markup language) and CSS (cascading style sheets) — the easy way, lol.

If you found this post on “Margins & Padding – How They Affect List Items” interesting, consider tweeting it to your friends. Subscribe to KD Did It, if you’d like to track this post for future updates.

Return to top