[an error occurred while processing this directive]
[an error occurred while processing this directive]

Using Style Sheets to Create Margins

Cascading Style Sheets provide for a simple, effective, and accessible way to create margins around text or other HTML elements without resorting to table abuse. Take the following code fragments from the WSU Third Level style sheet for example:

.indented {margin-left: 5%}

The above class declaration sets up an easy and effective method for adding a left margin to text and images.

.blockindented {margin-left: 5%; margin-right: 5%;}

This code creates 5% margins on the left and right side of the HTML element.

Note: These margins will not necessarily print. Netscape 6 and recent versions of Internet Explorer print these margins correctly. Previous versions of Netscape, however, do not. Design your pages to account for browsers that do not display or print CSS margins.

Below are instructions for using these classes with various HTML elements.

separator

Paragraph Margins

This is normal text.

This is text with a 5% CSS margin on the left. It is indented 5% of the width of the element.

You can use a margin like the paragraph above by inserting a class="indented" property in to the paragraph tag:

<p class="indented"></p>

Or you can use margins by surrounding the text with span or div tags:

<span class="indented"></span>

or

<div class="indented"></div>

Note, however, that the div tag tends to be more reliable across the major browsers than span.

Likewise, you can use class="blockindented" to create create margins on both sides of a paragraph block:

This is text with a 5% CSS margin on the left and right. It is indented 5% of the width of the element on both sides of the paragraph block. If you don't see the difference, than you either have style sheets turned off or your browser doesn't support them (time for one of those free upgrades).


separator

Image Margins

You can also use margins with images by adding the class="indented" property to the <img> tag:

Photo of students.
This image has a margin.


Photo of students.
This image does not have a margin.


separator

List Margins

Likewise, you can also indent lists. However, for compatibility across the major browsers, use a <div> tag instead of defining the class within the list tags.

  1. item 1
  2. item 2

The list above is indented.

  1. item 1
  2. item 2

The list above is not indented.

[an error occurred while processing this directive]

[an error occurred while processing this directive]