Home arrow Style Sheets arrow CSS: Margins and Padding

CSS: Margins and Padding

We learned how to work with borders and apply them to the various elements in our last tutorial. In this article we will go over setting margins and working with padding to give your web pages a seamless look. There is, as always, a lot of ground to cover, so let's get started.

Author Info:
By: James Payne
Rating: 5 stars5 stars5 stars5 stars5 stars / 26
March 31, 2008
  1. · CSS: Margins and Padding
  2. · Top Margin Using Centimeters and Percentage
  3. · Using Padding in CSS
  4. · Working with Lists in CSS
  5. · How to Set an Image as a List Marker

print this article

CSS: Margins and Padding
(Page 1 of 5 )

Simply put, margins are used to define the space around elements. You can set them all at once, or individually, as I will show you below. The default margin for most browsers is 8px, which stands for eight pixels. Margins consist of top, bottom, left, and right.

Setting All of the Margin Properties at Once

We can set all of the margins for an element all at once using margin. Here is how we do so for a paragraph and for an H1 tag:



<style type="text/css">

p.withmargin {margin: 2cm 3cm 4cm 5cm}

h1.withmargins {margin: 3cm 4cm 5cm 6cm}




<p>Here is an example of a paragraph with no margins</p>

<p class="withmargin">Here is an example of a paragraph will all margins set</p>

<h1> Here is an H1 tag with no margins</h1>

<h1 class="withmargins">Here is an H1 tag <i>with</i> margins</h1>



We can also set individual margin properties for the top, right, bottom, and left, as I will show you in the next section.

blog comments powered by Disqus

- CSS Padding Overview
- CSS: Margins Overview
- Top CSS3 Button Tutorials
- More Top CSS3 Tutorials for Animation and Im...
- CSS Mega Menus: Adding Extra Sections
- CSS Mega Menus
- CSS3 Accordian Menu: Horizontally Display Hy...
- CSS Combinators: Working with Child Combinat...
- CSS Combinators: Using General Siblings
- Intro to CSS Combinators
- CSS Semicircles and Web Page Headers
- Drawing Circular Shapes with CSS3 and Border...
- More CSS Pagination Link Templates
- CSS Pagination Links
- Animated CSS3 Image Gallery: Advanced Transi...

Watch our Tech Videos 
Dev Articles Forums 
 RSS  Articles
 RSS  Forums
 RSS  All Feeds
Write For Us 
Weekly Newsletter
Developer Updates  
Free Website Content 
Contact Us 
Site Map 
Privacy Policy 

Developer Shed Affiliates


© 2003-2019 by Developer Shed. All rights reserved. DS Cluster - Follow our Sitemap
Popular Web Development Topics
All Web Development Tutorials