Text Formatting

Some basic margin settings are controlled for you by the templates. For example, paragraphs, list items, tables, and headings in the main body of the page have a left margin of 20 pixels. This is to stop these elements from hitting up against the side menu. Headings also have a top margin to 10 pixels and a bottom margin of 0 pixels. This helps visually separate the content on a page, making it easier to tell what content relates to what heading.

Margins

Margins add space to the outside of the element in question. You can add top, bottom, left, and right margins. Values can be in pixels, em units, or as a percentage of the width of the nearest parent element.

h3 {margin-top: 20px;}
#newsbrief p {margin-left: 10em;}
ul {margin-bottom: 2%;}

Padding

Padding adds space to the element itself. The difference between margin and padding does not really come into play unless you are using background colors and borders on your elements. If you add padding to an element, the background color and border will extend to include the padding. If you add a margin, they will not since margins are added to the outside of the element.

Paddings and margins can be a bit quirky, so try a bit of trial and error and make sure to test your pages in multiple browsers.

h2 {padding-top: 0px;}
p {padding-bottom: 5%;}
.smalllist ol {padding-left: 20em;}

Text indent

Using style sheets, you can add an indent to the first line of an element. This is most often used to create a "tab" effect at the start of a paragraph. Negative values are permitted, which result in hanging indents.

p {text-indent: 5px;}
h3 {text-indent: -25em;}

Text align

Another element of text formatting available to you is text-align. You can left-align, right-align, center, or justify your text on the page.

p {text-align: center;}

h3 {text-align: right;
	font-style: italic;}