The box model in CSS describes the boxes which are being generated for HTML-elements. The box model also contains detailed options regarding adjusting margin, border, padding and content for each element. The diagram below shows how the box model is constructed

In the previous lesson you were introduced to the box model. In this lesson, we will look at how you can change the presentation of elements by setting the margin and padding properties.

Borders can be used for many things, for example as a decorative element or to underline a separation of two things. CSS gives you endless options when using borders in your pages.

Up until now, we have not cared much about the dimensions of the elements we have worked with. In this lesson, we will take a look at how you easily can define the height and width of an element.

An element can be floated to the right or to left by using the property float. That is to say that the box with its contents either floats to the right or to the left in a document (or the containing box) (see lesson 9 for a description of the Box model). The following figure illustrates the principle