Jegsworks: Free Online Computer Lessons Logo:Jegsworks Jan's Illustrated Computer Literacy 101
Home > Resources & Examples > Jan's CSS > Margins & Padding
Icon: Arrow - Previous pagePrevious      NextIcon: Arrow - Next page

Jan's CSS: Margins & Padding

With CSS margins and padding you can adjust the spacing of all the block elements on the page.

Block element: HTML block elements are those that normally start a new line and have white space above and below. These elements include headings (H1, H2, H3,...), paragraphs (P), divisions (DIV) and a number of less common HTML elements. You can change the margin and padding values for all sides - top, right, bottom, left.

Margin: Space outside the element itself that other elements cannot use. The margin is transparent and does not use the element's background.

Padding: Space between the element's contents and its border. Uses the element's background.

Syntax for shorthand property, combining all four sides:

margin: 6px               Sets all sides to the same value
padding: 8px               

margin: 5px 10px 15px 20px;               Sets top, right, bottom, left
padding: 5px 10px 15px 20px;

If you want to set just one or two sides, you can use separate rules,:

margin-top:       padding-top:
margin-right:     padding-right:
margin-left:      padding-bottom:
margin-bottom:    padding-left:

 Examples: Margins & Padding

a a a a a a a a
a a a a a a a a
a a a a a a a a

Default margins and padding, 0px
a a a a a a a a
a a a a a a a a
a a a a a a a a

Margin: 5px all sides
Padding: default
a a a a a a a a
a a a a a a a a
a a a a a a a a

Margin:Default
Padding: 5px all sides
  margin:5px; padding:5px;
a a a a a a a a
a a a a a a a a
a a a a a a a a

Margin: 5px all sides
Padding: 5px all sides

a a a a a a a a
a a a a a a a a
a a a a a a a a

Margin: Each side different
Padding: Default
a a a a a a a a
a a a a a a a a
a a a a a a a a

Margin: Default
Padding: Each side different
margin:5px;
padding:5px;		 margin:2px 8px 10px 15px; padding:2px 8px 10px 15px;

Image of the results:

Screen shot of examples of margin and padding