Understanding Box Models

The code defines the two boxes with a width 250 pixels and height of 100 pixels.
This Width and Height refers to the dimensions of the content area ONLY.
A good design approach is to build your CSS model boxes from the inside (Content Demensions) out.

1. Content - Determine the amount of content that will be held within the model box and how & where you want it to display on the page. This can include images as well.

2. Padding - How much area you want to place around the content. See padding as the matting around a picture.
The padding is transparent and lets the background-color of the box show through.

3. Border - This is the design element that wraps around the model box. Think of it as the picture frame.

4. Margin - This is the separation between two separate model boxes. Think of margins as the spacing on the wall between the photos.
Margins are transparent as well, and let the background-color of the page show through.

(#box1)   Mrs. Allison is a great teacher who makes learning how to code fun.
| | | | | | | |
(#box2)   Mrs. Allison is a great teacher who makes learning how to code fun.

This is the CSS within the style tag

    #box1 {
        text-align: justify;
        width: 250px;
        height: 100px;
        background-color: #FFFFFF;
        padding: 10px;
        border: 10px solid green;
        margin: 20px;
        float: left;
    }

 Note the use of the id # tag to differentiate each box

    #box2 {
        text-align: center;
        width: 250px;
        height: 100px;
        background-color: yellow;
        padding: 50px;
        border: 20px solid tomato;
        margin: 40px;
        float: left;
    }

BACK