Tutorial 3 - Nested Lists - Step 3 - Remove Padding And Margins

Trang chủ » Html List Style Padding » Tutorial 3 - Nested Lists - Step 3 - Remove Padding And Margins

Có thể bạn quan tâm

Listutorial - Step by step CSS list tutorial

Tutorial 3 - Nested lists

Step 3 - Remove padding and margins

  • Milk
    • Goat
    • Cow
  • Eggs
    • Free-range
    • Other
  • Cheese
    • Smelly
    • Extra smelly

Standard HTML lists have a certain amount of left-indentation. The amount varies on each browser. Some browsers use padding (Mozilla, Netscape, Safari) and others use margins (Internet Explorer, Opera) to set the amount of indentation.

To remove this left-indentation consistently across all browsers, set both padding and margins to "0" for the "UL".

Go to Step 4 →

CSS CODE #navcontainer ul { margin: 0; padding: 0; list-style-type: none; } HTML CODE <div id="navcontainer"> <ul> <li><a href="#">Milk</a> <ul> <li><a href="#">Goat</a></li> <li><a href="#">Cow</a></li> </ul> </li> <li><a href="#">Eggs</a> <ul> <li><a href="#">Free-range</a></li> <li><a href="#">Other</a></li> </ul> </li> <li><a href="#">Cheese</a> <ul> <li><a href="#">Smelly</a></li> <li><a href="#">Extra smelly</a></li> </ul> </li> </ul> </div> Other Max Design articles and presentations Associated with webstandardsgroup.org

Từ khóa » Html List Style Padding