Skip to main content

The CSS way to style margins and padding

Submitted by helen on Saturday, October 13, 2007 - 20:56; Modified on Thursday, August 18, 2016 - 11:07

When you want to add space between elements in your document, don't use empty p tags or br tags. There's no point, when creating space is something CSS can do easily using the CSS properties margin and padding. The margin property controls an object's margins and the padding property controls the amount of padding around an object. So, if you have a div, say, that is 20px x 20px and you apply a padding of 8px to it, the space available inside the div will shrink by 16px horizontally and 16px vertically.

Margin and padding — what's the difference?

A question that gets asked a lot is: what's the difference between margins and padding? Well, padding is added inside an element. Margins are applied to the outside of an element. It's useful to remember that padding contributes to an element's width and height, whereas margins do not.

When to use margin and when to use padding?

In most cases you can use margin or padding interchangeably to receive the same result, although, typically you would manipulate the margins around an element to create space between that element and the elements around it; and you would manipulate an element's padding, when you're focusing on the interior of that element.

Let's look at the syntax for margins and padding, then we'll move onto some real life demonstrations.

Examples

There are two ways you can write margin and padding — either longhand or shorthand. Shorthand is preferable as it means writing less code. I will include both methods for the purpose of these sets of examples.

The same values for all margins and padding

Shorthand

If all the margins and padding on an object are the same, we can supply one value for each, as such:


div {
	margin:4px;
	padding:8px; 
}

This will set all the margins on our div to 4px and all the padding to 8px.

Longhand

If we were to write this in longhand, it would be as follows:


div {
	margin-top:4px; 
	margin-right:4px;	
	margin-bottom:4px; 
	margin-left:4px; 
	padding-top:8px; 
	padding-right:8px; 
	padding-bottom:8px; 
	padding-left:8px; 
}

See what I mean about that taking up space!

The same values for top and bottom — and the same values for right and left

If you want to use the same value for your top and bottom margins or padding, and the same value for your left and right margins or padding, you can use two numbers for both sets of values. The first number describes the top and bottom values, and the second number describes the left and right values.


div { 
	margin:10px 5px; /* This element has top and bottom margins of 10px and left and right margins of 5px */
}

Here, our div has a top and bottom margin of 10px and a right and left margin of 5px.

Longhand

Just for consistency sake, here's the longhand version of the above:


div { 
	margin-top:10px; 
	margin-right:5px; 
	margin-bottom:10px; 
	margin-left:5px; 
}

All different values

If your margins and padding are all going to have different values, you can use four numbers - one for each direction:


div {
	margin:10px 5px 12px 3px; /* Our div has a top margin of 10px, a right margin of 5px, a bottom margin of 12px and a left margin of 3px */
	padding:8px 4px 10px 2px; /* Our div has a top padding of 8px, a right padding of 4px, a bottom padding of 10px and a left padding of 2px */
}

Longhand

The longhand equivalent would be (but this method really is unnecessary):


div {
	margin-top:10px; 
	margin-right:5px; 
	margin-bottom:12px; 
	margin-left:3px; 
	padding-top:8px; 
	padding-right:4px; 
	padding-bottom:10px; 
	padding-left:2px; 
}

Three values...but which is which?

There is yet another configuration. If your top, right and bottom values are all going to be different, and left is going to be the same as right, you can use three values. The first number describes the top value, the second the right and left value, and the third the bottom value.


div { 
	padding:20px 5px 8px; /* First we set our top padding, then our right and left, then our bottom */ 
}

Longhand

In longhand, this would be:


div {
	padding-top:20px; 
	padding-right:5px; 
	padding-bottom:8px; 
	padding-left:5px; 
}

Practical application #1 - setting various margins and padding

Removing the margins and padding on a ul

A ul has margins and padding, which can vary from browser to browser. Often you may find it useful to set the margins and padding on a ul to zero, which is what I will demonstrate below.

CSS Code:


ul#noMarginsPadding { 
	margin:0; 
	padding:0; 
	background-color:#FC9; /* For demonstration purposed. */ 
}

(X)HTML Code:


<ul id="noMarginsPadding">
	<li>Photon</li>
	<li>Gluon</li>
	<li>W+ W- Z</li>
	<li>Graviton</li>
</ul>

Result:

  • Photon
  • Gluon
  • W+ W- Z
  • Graviton

As you can see, setting the margins and padding to zero on a ul has the effect of pushing the bullet-points out of the ul. This is because the bullet-points aren't considered part of the list item itself. When you remove the padding from inside the list, the list items come to rest against the side of the list, causing the bullet-points to naturally fall outside of the list.

Practical application #2 - navigation

Suppose you have navigation items floated side-by-side in a ul. You want some space between the lis and you also want to pad them out a bit, as they don't look particularly remarkable. You would start by applying a padding to each li:

Bulking up our lis

CSS Code:


#practicalNav li { 
	padding:6px;  
	display:block;
	float:left; /* For demonstration purposes. */    
	width:160px; /* For demonstration purposes. */    	
	background-color:#9C9; /* For demonstration purposes. */
	border:1px solid #369; /* For demonstration purposes. */       
}

(X)HTML Code:


<ul id="practicalNav">
	<li>Chris Redfield</li>
	<li>Jill Valentine</li>
	<li>Leon Kennedy</li>
	<li>Claire Redfield</li>
	<li>Albert Wesker</li>
</ul>

Result:

  • Chris Redfield
  • Jill Valentine
  • Leon Kennedy
  • Claire Redfield
  • Albert Wesker
Our lis are now looking like they have some substance to them. Time to add our margins.

Let's add a margin

CSS Code:


#practicalNav2 li {
	padding:6px; 
	display:block;
	float:left; /* For demonstration purposes. */    
	width:160px; /* For demonstration purposes. */    	
	margin:8px; float:left; /* For demonstration purposes. */
	background-color:#9C9; /* For demonstration purposes. */
	border:1px solid #369; /* For demonstration purposes. */ 
}

Result:

  • Chris Redfield
  • Jill Valentine
  • Leon Kennedy
  • Claire Redfield
  • Albert Wesker

Now that's what I'm talking about!

Giving our lis a margin of 8px pushes them apart. In total, there is a space of 16px between each item (because each li has a left and right margin of 8px and 8 + 8 = 16).

Honing those margins

Above, we set the margins on our lis to 8px. We may have achieved our goal of splitting the items up, but now there is an unwanted space at the beginning and end of our ul. To remove this, we can either target the left and right margins of the first and last lis using the CSS :first-child and :last-child selectors (backed up by classes for older browser support...and, of course, IE support), or we can reduce the values we're applying to our margins.

The pseudo-selector approach

When using the :first-child and :last-child and/or classes to override the margins, it is a good idea to use longhand, i.e., margin-left and margin-right. We've already defined our 8px margin elsewhere in the stylesheet, so there's no point setting the values for the margins that aren't going to change again. We only want to alter the margin that needs to change.

CSS Code:


li:first-child, .first { 
	margin-left:0; 
}

li:last-child, .last { 
	margin-right:0; 
}

The reduced margins approach

Applying reduced margins to accomplish the same task, still involves some tweaking because, either way, you're going to end up with an unwanted margin - either at the beginning or end of your ul. What is typically done is that the right margin is set on your lis, to whatever value you find sufficient, and then removed from the last li.

CSS Code:

#practicalNav3 li { 	
	background-color:#9C9; /* For demonstration purposes. */
	margin:8px 16px 8px 0; /* Our right margin is set to 16px to compensate for the fact that we have removed our left margin */ 
	padding:6px; float:left; /* For demonstration purposes. */ 
	border:1px solid #369; /* For demonstration purposes. */ 
} 

#practicalNav3 li:last-child, #practicalNav3 .last { 
	margin-right:0; 
}

Result:
  • Chris Redfield
  • Jill Valentine
  • Leon Kennedy
  • Claire Redfield
  • Albert Wesker

Support for :first-child and :last-child

I've used the pseudo selectors :first-child and :last-child here as it's good practice to remove margins and various other styles that you don't need from your first and last elements. The issue with these selectors is IE: :first-child is a CSS2 selector and is supported in IE7 and onward, whereas :last-child is a CSS3 selector and is only supported in IE9. For backwards compatibility, it is best to create supporting classes called first and last and include them in conditional stylesheets for the relevant versions of IE, so you can still keep up to date with the times while supporting IE.

For more on styling navigation see Styling list items with CSS, Horizontal menus and list items with definite widths and Horizontal menus and list items with automatic widths.