Margins, Padding + Borders Illustrated

Margins, padding and borders work in fairly uniform ways for block tags like <h1> or <div> as these examples show. Note the core content is shaded in light blue and the CSS styling properties are under-bolded:

h2 {background-color:#CCCCff; border: solid thin #666666; margin: 35px padding: 12px
font-size: 12px; font-weight: normal; font-variant: normal; }

The <h2> tag stylings have been redefined as shown above. The font stylings will remain constant throughout these examples as I concentrate on showing the different border, margin, and padding options/properties. Note how this <h2> styling acts to offset and highlight its contents.

In the next example using the <h3> tag the margin will be reduced dramatically from 35px to 1px (margin: 1px) and the border hidden(border: none...). Note the top margin is wrong in a number of browsers. Ironically, IE7, one of the worst browsers for adhering to CSS standards, gets it right in this case.

h3 {background-color:#CCCCff; border: none thin #666666; margin: 1px; padding: 12px font-size: 12px; font-weight: normal; font-variant: normal; }

In the third example using the <h3> tag the margin and padding will be reversed while adding a CSS style to the h4 tag. As well we shall change the background color to a rose hue. And note what happens - there is almost no padding around the text; but now the margin is 12pixels around

h4 {background-color:#FFCCCC; border: none thin #666666; margin: 12px; padding: 1px font-size: 12px; font-weight: normal; font-variant: normal; }

This has a a tight look and helps to save space while still emphasizing a point - I like to use low or no padding offsets like this when Web page space is at a premium.

In setting up the <h5> tag I add back a border but using the groove property and do something different with padding. This time the padding property will be set twice. the first, padding: 1px, says add a 1 pixel padding on all 4 sides of the text block.
h5 {background-color:#FFCCCC; border: groove 5px #666666; margin: 12px; padding: 1px font-size: 12px; font-weight: normal; font-variant: normal; padding-bottom: 18px }

However, at the bottom of the CSS style I add the following: padding-bottom: 18px. But the results were no padding. Not what I expected - the 4 sided padding takes precedence over the later padding-bottom styling directive. In order to get the 18 pixel padding as seen above I had to resort to a hack - I added the following to the h5:
<h5 style="padding-bottom: 18px">
As you can see in most browsers, this works because the style= takes precedence over the locally defined CSS tag styling.

In the <h6> styling we change the color again; remove the padding-bottom and change it to a 5% value.

h6 {background-color:#CCFFCC; border: dashed 5px #666666; margin: 12px; padding: 5% font-size: 12px; font-weight: normal; font-variant: normal; }
Ooops I forget to tell you I changed the border style to dashed. And note what happens to the padding - it is substantial in size because each tag defines how the % is to be calculated; in the case of padding it is taken as a percentage of the containing blocks width - hence the large padding.

Now lets see how the <h6> CSS styling above works with an inline tag like <span> rather than a block tag. As one might suspect the the box properties - margin, padding and border are ignored in the <span>; but this is highly browser dependent. However, lets see what happens when we do the following:

I have added the display: block; styling directive to the span - and this is the result. The <span> tag now works exactly like a block oriented <div> or <h6> tag for its CSS styling.

This example-laden exercise illustrates two things. First, its shows how easy it is to change the margin, border, and padding properties to get the exact styling users may want when emphasizing text and points in their Web pages. Second, it also shows how uniformly all the browsers implement these properties particularly for block tags; users should expect to see some variations among the browsers when inline tags liks <span> or <a> are used with margin, border and padding properties.

Finally, if users want to specify the exact margins, padding or border they have available specific CSS styling commands:
Border Margin Padding
border-left: margin-left: padding-left:
border-right: margin-right: padding-right:
border-top: margin-top: padding-top:
border-bottom: margin-bottom: padding-bottom:
So users can be as precise as desired to do most of their CSS box stylings.