Link to USGS home page
Internal USGS Access Only

Cascading Style Sheets, White Space

Left and Right Margins

The left and right margins of any object can be set by defining a style like this (an em is the width of the letter m):

  <style type="text/css">
    .indented {
        margin-left: 4em;
        margin-right: 4em;
        }
  </style>

The next two paragraphs define an example of how the style would be used, and what the results would look like.

  <p class="indented">This is a sample bit of text...</p>

This is a sample bit of text long enough to show that the left margin is four times the font size, and the right margin is four times the font size. Indenting has always been awkward in html, and fortunately this is one of the cascading style sheet features supported by the major browsers.

Space Before and After Elements

The space above and below an object can also be set with margins. The next three paragraphs show the rules for a style, how that style would be used, and the result.

  .skip {
    margin-top: 3em;
   margin-bottom: 3em;
  }
  <p class="skip">There should be three blank lines...</p>

There should be three blank lines before this paragraph and three blank lines after. Although the major browsers do give extra space, there is a disturbing amount of variety between older browsers as to exactly how much space one gets.

First Line Indents

The first line of a paragraph can be indented using the style rule "text-indent".

    text-indent: 1em;

This feature is yet one more small step towards web pages that look as sophisticated as paper documents. The example to follow shows how, by using a negative first line indent, one can set up a bibliographic citation format:

    margin-left: 4em;
    text-indent: -4em;

Voss, C.I., Boldt, David, and Shapiro, A.M., 1997, A graphical-user interface for the U.S. Geological Survey's SUTRA code using Argus ONE (for simulation of variable-density saturated-unsaturated ground-water flow with solute or energy transport): U.S. Geological Survey Open-File Report 97-421, 106 p.

slide 21

[up]
"Mastering a Web Site" online course
Created and maintained by Lorna Schmid and David Boldt.
http://water.usgs.gov/usgs/training/webmaster/css_space.html    
Last modified: Wed Nov 12 17:47:55 EST 2003