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:

The box model in CSS

The illustration above might seem pretty theoretical to look at, so let's try to use the model in an actual case with a headline and some text. The HTML for our example is (from the Universal Declaration of Human Rights):

 
 
Article 1:
All human beings are born free
 and equal in dignity and rights.
 They are endowed with reason and conscience
 and should act towards one another in a
 spirit of brotherhood

By adding some color and font-information the example could be presented as follows:

The example contains two elements:

and . The box model for the two elements can be illustrated as follows:

Even though it may look a bit complicated, the illustration shows how each HTML-element is surrounded by boxes. Boxes which we can adjust using CSS.

Margin and padding

Set the margin in an element

An element has four sides: right, left, top and bottom. The margin is the distance from each side to the neighboring element (or the borders of the document). See also the diagram in lesson 9 for an illustration.

As the first example, we will look at how you define margins for the document itself i.e. for the element . The illustration below shows how we want the margins in our pages to be.

The CSS code for this would look as follow:

 
 body {
  margin-top: 100px;
  margin-right: 40px;
  margin-bottom: 10px;
  margin-left: 70px;
 }

Or you could choose a more elegant compilation:

 
 body {
  margin: 100px 40px 10px 70px;
 }

Show example

You can set the margins in the same way on almost every element. For example, we can choose to define margins for all of our text paragraphs marked with :

 
 body {
  margin: 100px 40px 10px 70px;
 }

 p {
  margin: 5px 50px 5px 50px;
 }

Show example

Set padding in an element

Padding can also be understood as "filling". This makes sense as padding does not affect the distance of the element to other elements but only defines the inner distance between the border and the content of the element.

The usage of padding can be illustrated by looking at a simple example where all headlines have background colors:

 
 h1 {
  background: yellow;
 }

 h2 {
  background: orange;
 }

Show example

By defining padding for the headlines, you change how much filling there will be around the text in each headline:

 
 h1 {
  background: yellow;
  padding: 20px 20px 20px 80px;
 }

 h2 {
  background: orange;
  padding-left:120px;
 }

Show example

Borders

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.

The width of borders [border-width]

The width of borders is defined by the property border-width, which can obtain the values thin, medium, and thick, or a numeric value, indicated in pixels. The figure below illustrates the system:

The color of borders [border-color]

The property border-color defines which color the border has. The values are the normal color-values for example "#123456", "rgb(123,123,123)" or "yellow" .

Types of borders [border-style]

There are different types of borders to choose from. Below are shown 8 different types of borders as Internet Explorer 5.5 interprets them. All examples are shown with the color "gold" and the thickness "thick" but can naturally be shown in other colors and thicknesses.

The values none or hidden can be used if you do not want any border.

Examples of defining borders

The three properties described above can be put together by each element and thereby produce different borders. To illustrate this, we will take a look at a document where we define different borders for

and . The result may not be that pretty but it illustrates some of the many possibilities:

 
 h1 {
  border-width: thick;
  border-style: dotted;
  border-color: gold;
 }

 h2 {
  border-width: 20px;
  border-style: outset;
  border-color: red;
 }

 p {
  border-width: 1px;
  border-style: dashed;
  border-color: blue;
 }

 ul {
  border-width: thin;
  border-style: solid;
  border-color: orange;
 }

Show example

It is also possible to state special properties for top-, bottom-, right- or left borders. The following example shows you how:

 
 h1 {
  border-top-width: thick;
  border-top-style: solid;
  border-top-color: red;

  border-bottom-width: thick;
  border-bottom-style: solid;
  border-bottom-color: blue;

  border-right-width: thick;
  border-right-style: solid;
  border-right-color: green;

  border-left-width: thick;
  border-left-style: solid;
  border-left-color: orange;
 }

Show example

Compilation [border]

As it is also the case for many other properties, you can compile many properties into one using border. Let us take a look at an example:

 
 p {
  border-width: 1px;
  border-style: solid;
  border-color: blue;
 }

Can be compiled into:

 
 p {
  border: 1px solid blue;
 }

ustcer

Thursday, June 26, 2014

CSS: The box model