Containers

All elements of a Web page, from single lines of text to large interactive images, have an invisible container around them that controls their spacial relationships with other elements on the page.

This container can be viewed as an invisible border around the object with a width of 0px.

Assigning a border width of 1px to an object will show the edges of the container but will increase its width and height by 2px.

Borders

Borders are a good way to highlight images and passages of text.

They can be styled in many ways and any colour but the default is a solid black line. For your code to be recognized and correctly implemented you must either give each characteristic individually or as a shortcut give them in a specific order.

border: border-width border-style border-color}

To add a style to your borders select one of the following:

border: solid
border: dashed
border: double
border: dotted
border: groove
border: inset
border: outset
border: ridge
border: hidden

To see the full effect of some of these styles you will need to set a border width of at least 3px.

Valid XHTML 1.0 Transitional

Margins and Padding

Margins and padding are the spaces that occur around the text, pictures, tables and lists you enter on your Web page.

margin and padding
comparison

The diagram, right, illustrates the relationship between the two.

Put basically, an objects margins push away other elements in your page while padding creates space around an object within a "container".

Click the following link to see examples of how margins, padding, and borders interact. Having a strong grasp of this relationship will help you get the page layout you want.

This section will look at how to use margins, padding and borders to set out you page.

  1. Continuing with the image you styled for the images section, open your .css file and add this command to your img styling:

    img { border: solid;
    border-color: #fff;
    border-width: 3px;
    float: right;
    margin: 5px; }

  2. Go to your browser and open or refresh your .html file. The words that were butted up against the picture border should now have moved back somewhat.

    Using the command margin: 5px; extends the margins 5px (pixels) in all directions. Sometimes you might not want to move the picture in all directions. To control this you can specify the margins for each side of the picture.

  3. Open your.css file and modify your margin command to read:

    margin: 0 0 0 5px; }

  4. Go to your browser and open or refresh your .html file. Your picture should move up and right slightly.

    Each number in the margin command you entered relates to a side of the image.

    The order of these numbers flows clockwise going: top→right→bottom→left.

  5. Images are not the only objects that can have their margins and padding manipulated. Enter this text to your .html file;

    <p><img src="pony.jpg" alt="my very own pony" width="282" height="217" /></p>
    <p>A pony is most commonly a certain breed of small horse, generally...
    The term "pony" can be used in general...</p>
    <p class="style1">This class will have these characteristics: margin: 20px; padding: 0; border: 1px</p>
    <p class="style2">This class will have these characteristics: margin: 0; padding: 20px; border: 1px</p>

  6. Open your .css file and add the above paragraph stylings:

    img { border: solid;
    border-color: #fff;
    border-width: 3px;
    float: right; }
     
    p.style1 { margin: 20px;
    padding: 0;
    border: 1px dashed; }
     
    p.style2 { margin: 0;
    padding:20px;
    border: 1px dashed; }

  7. Go to your browser and open or refresh your .html file. You should see a dotted line surrounding the two lines of text you added.

    By adjusting the margins and padding of your elements you can create subtle visual relationships and strengthen the overall flow of your pages.

Next section: Styling Lists →