The CSS way to style margins and padding

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. margin controls an object's margins and padding controls an object's padding.

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 outsides 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. The only time the differences between the two are made apparent is when the inner object is distinguishable from the outer object. For instance, suppose you have two divs, one inside the other. They both contain text, but neither has a background colour or a border. You want to create some space between the inner div and the outer div. In this instance, you can either apply a padding to the inner div or the outer div, or you can apply a margin to the inner div. All three methods will herald the same results.

But, if the inner div has a background colour and you don't want there to be any space between the text in the inner div and the edge of the inner div itself, you would not apply any padding to the inner div. In this instance, to create space between both divs, you can only assign margins to the inner div and margins or padding to the outer div. If you give the inner div some padding, it will create space between the text and the edge of the div, which is not what you want.

While that's all well and good, it still doesn't explain where you would use margin and where you would use padding. The following should help:

If you want to create space around an element, you manipulate its margins. If you want to create space inside an element, you manipulate its padding.

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

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.

The longhand would be:

        	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.

Just for consistency sake, here's the longhand:

        	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 */
            }
		

Again, the longhand:

        	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 (ths is giving me RSI!):

        	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 of a nonzero value, which vary from browser to browser. Often you will want to set the margins and padding on a ul to zero.

CSS Code:

	
			ul {
            	margin:0;
                padding:0;
                background-color:#FC9; /* For demonstration purposed. */
            }         
       
			<ul>
            	<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.

Big gap on eitherside

CSS Code:

			#outerx {
				padding:0 20px;
				background-color:#CAD; /* For demonstration purposed. */
			}

			#innerx {
 				background-color:#69C;           	
			}
       

(X)HTML Code:

        <div id="outerx">
        	<div id="innerx">For every action there is an equal and opposite reaction - Newton's third law of motion</div>
        </div>
       

Result:

For every action there is an equal and opposite reaction - Newton's third law of motion

Practical application #2 - navigation

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

Bulking up our lis

CSS Code:

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

(X)HTML Code:


        <ul>
        	<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:

        li {
        	padding:6px;               
        	margin:8px;        	
        	float:left; /* 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.

Using the selectors

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 tactic

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:
        	li {
            	margin:8px 16px 8px 0; /* Our right margin is set to 16px to compensate for the fact that we have removed our left margin */
            }
            
            li:last-child, .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.

Latest Tutorials

View all tutorials