margin: ***; padding: ***;

Browser
  • IE
  • Cr
  • Sf
  • Fx
  • O

The margin property sets the margin around an element, and the padding property sets the padding of an element.

When you apply these properties to the UL or OL element, the spacing around the list can be adjusted.


ul {
margin: 0 0 0 20px;
padding: 0;
}
Property Value Explanation
margin length, %, or auto the top, bottom, left, and right margins
padding length, %, or auto the top, bottom, left, and right paddings

Screen shots of examples

The base code

div { border: 2px red solid; }
ul { border: 1px blue solid; }
li { border: 1px lightgreen solid; }

<div>
<ul>
<li>First list item</li>
<li>Second list item</li>
<li>Third list item</li>
</ul>
</div>

  • The red border : The parent box. (DIV)
  • The blue border : The whole of the list. (UL)
  • The green border : The list item. (LI)
In Quirks mode
Code MSIE Firefox Opera
The default MSIE Firefox Opera
ul {
margin: 0;
} 		MSIE Firefox Opera
ul {
padding: 0;
} 		MSIE Firefox Opera
ul {
margin: 0;
padding: 0;
} 		MSIE Firefox Opera
ul {
margin: 0 0 0 1em;
padding: 0;
} 		MSIE Firefox Opera

Example


<html>
<head>
<title>TAG index</title>

<style type="text/css">

div {
margin-bottom: 20px;
border: 1px #808080 solid;
}

ul { padding: 0; }

#example1 { margin: 0 0 0 1.5em; }
#example2 { margin: 10px 10px 10px 50px; }

</style>

</head>
<body>

<div>
<ul id="example1">
<li>First list item</li>
<li>Second list item</li>
<li>Third list item</li>
</ul>
</div>

<div>
<ul id="example2">
<li>First list item</li>
<li>Second list item</li>
<li>Third list item</li>
</ul>
</div>

</body>
</html>
Output
  • First list item
  • Second list item
  • Third list item
  • First list item
  • Second list item
  • Third list item