NWE Help: Web: Authoring: HTML: CSS: Layout

NWE Home :: Help :: Web :: Authoring :: HTML :: CSS

The layout of pages under CSS is constructed as through each element was in a box. With each box, CSS can create margins or padding. Margins define the limits of the box and padding creates a padded space between the margin of the box and the elements inside the box. If you had a box of text, margins and padding would operate the same way, but background items extend into the padding and not the margins, so those will appear differently. CSS includes all of this to answer the limits of HTML, which requires that elements be in tables just to create simple effects like borders.

This is a box with lots of padding, which can be seen with how the text has extra background grey behind it.

This is a box with no padding, which can be seen with how the text has no extra background yellow behind it.

Margins

To set margins, use the margins property. For margins, you can specify exact lengths, percentages, or auto (which fits the space around what it contains). The margins property is called in this syntax:

blocktag {margin: top right bottom left;}
This could be:
blockquote {12px 2em 3ex 1in;}
Or:
P {10px 10px 10px 10px;}

If you wanted all of the margins to be the same size, like 10px in the example of above, you can just use 10px once and it will be applied to the top, right, left, and bottom. Margin values are listed in the order top, right, bottom, left. CSS rules for reading these values also stipulate for missing values. For instance, if left is left off, then the value for right is also used for left. If the bottom value is missing, then the value for top is also used for bottom. If the value for right is missing, the value for top is used for right.

You can also use single-side margin properties to declare just one of the margins. The options for this are: margin-top, margin-right, margin-bottom, and margin-left. These are called using this syntax:

element {margin-left: 30em; margin-right:42em;}
h3 {margin-bottom: 12px; margin-top: 0px;}

Padding

Padding defines the space between the borders and the content. Padding can be set with a defined length or a percentage. Unlike margins and borders, padding values cannot be negative. To set padding, use the padding property, which is called in this syntax:

blocktag {padding: size;}

As with the other borders and margins, padding can be set uniformly or can be set based on the top right bottom left arrangement, like this:

P {padding: 10px 12px 20px 15px;}

The example above would give set the padding to be: top - 10 pixels; right - 12 pixels; bottom - 20 pixels; left - 15 pixels. You can also declare the padding of an individual side using the properties: padding-top, padding-right, padding-bottom, and padding-left.

Borders

CSS allows you to define a border. Borders have four options: width, thickness, style, and color. The style options for borders are: none, dotted, dashed, solid, double, groove, ridge, inset, and outset. For the border to exist, the style must be something other than none. Border options are called using border-style in this syntax:

element {border-style: option; color: #ccc;}

You can also call multiple styles for the same element using the margin: top right bottom left arrangement. So, you could make a top and right solid border to go with a left and bottom dashed border using:

P {border-style: solid dashed dashed solid;}

Border widths can be think, medium, thick, or have a defined length. Border widths are declare using border-width like this:

P {border-style: dotted; border-width: thin;}

If you want specific widths for parts of the border, you can specify border-top-width, border-right-width, border-bottom-width, and border-left-width instead of using border-width, which makes all the borders equivalent.

Border colors can be one color for all sides, or can be called using the top right bottom left arrangement to have up to four colors. If no colors are declared, then the foreground color of the element is used for the border color - for instance, for most default hyperlinks the foreground color is blue.

Once you feel confident with these options, you can declare borders using the shortened syntax that combines styles, widths, and colors. The options for the shortened declarations are border-top, border-right, border-bottom, and border-left. These are called using any of the width, style, and color declarations in any order; like this:

P {border-top: thick dotted blue;}
P {border-bottom: thick blue;}