Page Construction

3.1 The Box Model



In CSS, the term “box model” is used as a theoretical framework to help understand page layout. When rendering a page, the browser represents each element as a rectangular box. So to construct a page, we essentially wrap boxes around our content areas and content.

The boxes can then be moved and modified using CSS to create dynamic page layouts.

the html box model diagram

The content area of each box contains the "real" content of the element — the text, image, video, etc. The most common CSS properties used when working with boxes are width, height, padding, margin, and border. As stated above, all HTML elements can be considered as rectangular boxes and can utilize these properties.

the css box model properties

The <div> Element

To create "boxes" we use the <div> element.

<div class="logo">
    Content goes here

In CSS the selector for a div is the class name of the box with a period (.) in front. Same as any other element that uses a class: