Working with CSS Margin,Padding and Borders - CSS Lesson Five

Margin ,padding and borders are the three most commonly used properties for spacing-out elements.  A margin is the space outside of the element, whereas padding is the space inside the element. Border can be useful to add spice to an element and can be change to meet different design needs.

Change the CSS code for h2 to the following:

h2 {

font-size: 1.5em;

background-color: #ccc;

margin: 1em;

padding: 3em;

}

You will see that this leaves one-character width space around the secondary header and the header itself is fat from the three-character width padding.

The four sides of an element can also be set individually. margin-top, margin-right, margin-bottom,margin-left, padding-top, padding-right, padding-bottom and padding-left are the self-explanatory properties you can use.

The Box Model

Margins, padding and borders (see next page) are all part of what’s known as the Box Model. The Box Model works like this: in the middle you have the content area (let’s say an image), surrounding that you have the padding, surrounding that you have the border and surrounding that you have the margin. It can be visually

represented like this:

Margin box

Border box

Padding box

Element box

You don’t have to use all of these, but it can be helpful to remember that the box model can be applied to every element on the page, and that’s a powerful thing!

Borders

Borders can be applied to most HTML elements within the body.  To make a border around an element, all you need is border-style. The values can be solid, dotted, dashed, double, groove, ridge, inset and outset.

border-width sets the width of the border, which is usually in pixels. There are also properties for bordertop-width, border-right-width, border-bottom-width and border-left-width.

Finally, border-color sets the color. Add the following code to the CSS file:

h2 {

border-style: dashed;

border-width: 3px;

border-left-width: 10px;

border-right-width: 10px;

border-color: red;

}

This will make a red dashed border around all HTML secondary headers (the h2 element) that is 3 pixels wide on the top and bottom and 10 pixels wide on the left and right (these having over-ridden the 3 pixel wide width of the entire border).

Tags: CSS Border, CSS Margin, CSS Padding