How to Work With the Basic Box Model in CSS3 - dummies

How to Work With the Basic Box Model in CSS3

By John Paul Mueller

In CSS3, everything you view on a page is in a box. That box separates objects from each other and makes it possible to create various special effects. Using boxes makes it possible to position content onscreen, fill various areas with color, and create the sorts of separations that users expect. The following sections discuss the basic box model in more detail.

How to view the boxes in CSS basic box model

The basic box model actually relies on a series of four boxes — each of which is placed inside the next.


Each region or box has a specific purpose. For example, the margin serves to separate the entire boxed region from other boxed regions on the page. Of course, you can set the margin to zero so that there’s no separation, but you can provide as much separation as needed to obtain the desired appearance.

Borders serve to provide visual separators between items of content. They are used all the time on web pages. Each side of a border can be controlled separately. You may choose to display only the right border and not the top, bottom, or left when working on the left pane of a page. The border would end up looking like a line instead of a box.

Padding separates the border from the content, when the border is displayed. Otherwise, the border and content would appear directly next to each other and the content would appear cramped in some cases. This would be a serious problem when you’re working with text. On the other hand, you may actually want the border directly next to an image to highlight the image and set it off on a page.

The result of all these regions is that you end up with a content area that’s somewhat smaller than the box as a whole unless you eliminate the margin, border, and padding. The content is nestled securely in its box and presents information to the user in a form that’s both usable and aesthetically pleasing.

How to work with the box model in CSS3

The use of a border is one such situation. In addition, setting the margin to zero removes the space between screen elements. There’s no requirement to make use of content. An object on the page can provide a visual function as well. The following procedure shows a few other ways in which to work with the margin, border, padding, and content used to create the basic box model.

  1. Create the ExternalCSS.HTML and ExternalCSS.CSS files and copy them to a new folder.

  2. Open ExternalCSS.CSS.

  3. Change the existing styles by adding the code shown in bold:

     font-family: cursive;
     font-size: large;
     color: #0000ff;
     background-color: #ffff00;
     border: outset;
     border-width: thick;
     border-radius: 6px;
     margin: 2px;
     padding: 5px;
     font-family: "Times New Roman",Georgia,serif;
     font-size: 40px;
     text-align: center;
     text-decoration: underline;
     color: #ff0000;
     background-color: #00ffff;
     border-bottom-style: groove;
     border-left-style: ridge;
     border-right-style: ridge;
     border-top-style: groove;
     border-width: 15px;
     border-color: Gray;
     margin: 2px;
     padding: 6px;

    These changes add various special effects to the text. You wouldn’t actually use this many different kinds of styles all on one page. It’s a bit overwhelming.

    Notice that you can make the corners square or rounded. The amount of rounding is specified by the border-radius property. The border-width and border properties both affect the rounding as well. Certain border styles support round corners better than others do.

    It’s possible to control each border, margin, and padding side individually. This example also shows the effect of combining border styles to create a particular look. In order to combine styles, you must specify each side separately.

  4. Type the following code after the existing styles and save the changes to disk.

     border: double;
     border-width: 20px;
     border-color: Blue Red Green Purple;
     margin: 0;
     padding: 20px;

    Many developers forget that the document <body> tag is also an object onscreen — and that its appearance is controllable. This example adds a border around the entire content area. Notice that the border-color property is used to add a different color to each side: top, right, bottom, and left (in that order).

  5. Reload the test page.

    You see the effect of making the style change. You’d never use this many styles together, except in an example for comparison purposes.