CSS: Margins and Padding
(Page 1 of 5 )
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.
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:
<html>
<head>
<style type="text/css">
p.withmargin {margin: 2cm 3cm 4cm 5cm}
h1.withmargins {margin: 3cm 4cm 5cm 6cm}
</style>
</head>
<body>
<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>
</body>
</html>
We can also set individual margin properties for the top, right, bottom, and left, as I will show you in the next section.
Next: Top Margin Using Centimeters and Percentage >>
More Style Sheets Articles
More By James Payne
/ 3 
