Basic Introduction to The CSS Box Model

In CSS web layout, each HTML element is represented in a rectangular box. Because element is a box, to apply CSS to selected elements, we assume some of the box properties. This is why we have “the CSS box model”.

In this module, we shall look at the content box, content overflow, background properties, shadow effects and classes of boxes. There is a lot to cover in this module.

Let us quickly look at the content box of a selected element and its properties.

The Content Box

The CSS box model is the core or primary component of every CSS web layout. In its simplest form, the CSS box model represents every HTML element in a rectangular box. Each box element is made up of the following properties:

• the margin,
• the border,
• the padding, and
• the content.

These properties are built around the element with the content being the innermost property and margin being the outermost property. These properties are adjusted in CSS by assigning values to them.

Let us illustrate the CSS box model for a clearer understanding.

From the image, we notice some properties. Let us go through them individually.

Content height and width: This is the actual height and width of the element’s content. We use the height and width properties to set their values. we may also use the min-height, max-height, min-width, and max-width properties to set values for the content based on constraints.

Note the following concerning content height and width:

1. content width does not include the padding and the border. Hence, to get a total box width, we will need to add up the following: width + padding-left + border-left + padding-right + border-right = total width.

If we really want to ensure that the overall box width, including padding and border, is of a certain percentage, say, 60%, then we will use the box-sizing property instead of width property. E.g. box-sizing: border-box;

2. To set the height property, do not use percentages, say, 60%, instead use absolute value, like, 350px. This is because box height takes on the height of the CSS box model content.

Padding: This is usually the distance between the edge of the content and the border as shown in the image above. We may use the padding property to set equal value for all the four sides or use the padding-top, padding-right, padding-bottom, and padding-left to set individual side’s padding respectively.

Border: The distance between the margin and the padding is occupied by the border. By default, border values are set to 0, which make them invisible. To set a border, we may use the border property. This will set a border for all the four sides. However, we may decide to set a border for each side using: border-top, border-right, border-bottom, and border-left.

When setting the border property, use the format:

div {
  border: border-width border-style border-color;
} 

where border-width (e.g. 5px), border-style (e.g. solid), and border-color (e.g. red). 

Thus, we have:

div{
  border: 5px solid red;
}

When background-color or background-image property is added to an element, it usually extends to the outer edge of the border. This can be controlled using the background-clip property.

Margin: This is the outermost layer in the CSS box model. It surrounds the element and helps to push out other elements in the layout. We can use the margin property to set its value or use the margin-top, margin-right, margin-bottom, and margin-left to set individual side properties.

Example:

p{
  margin: 7px;
} 
p{
  margin: 5px 3px 5px 3px;
}

The second example sets the margin-top and margin-bottom to 5px, and margin-right and margin-left to 3px.

If you want to centralize the content of an element, use the auto as value for left and right margins.

E.g.  div{margin: 5px auto;}

This will set 5px as margin for the top and bottom and auto for the left and right, thereby centralizing the content.

Let us illustrate the CSS box model with the following simple code:

article{
  width: 50%; 
  height: 150px; 
  padding: 10px; 
  border: 3px dotted coral; 
  margin: 15px 10px 20px 15px;
}

article{
  width: 50%; 
  height: 150px; 
  padding: 10px; 
  border: 3px dotted coral; 
  margin: 15px 10px 20px 15px; 
  overflow: auto;
}

<div>
  <p class="test" id="tests"><u>It is not a new thing that</u> <span>politics</span> in <span>Nigeria</span> is for the risk takers. 
     This tells why people could leave their current jobs and business to pursue <span>politics</span>.
  </p>
</div>
 
CSS
div{
  width: 70%; 
  padding: 10px; 
  border: 3px dotted green; 
  margin: 15px 10px 20px 15px; 
  background-color: darkblue; 
  background-clip: border-box;
}

div{
  width: 70%; 
  padding: 10px; 
  border: 3px dotted green; 
  margin: 15px 10px 20px 15px; 
  background-color: darkblue; 
  background-clip: padding-box;
}

div{
  width: 70%; 
  padding: 10px; 
  border: 3px dotted green; 
  margin: 15px 10px 20px 15px; 
  background-color: darkblue; 
  background-clip: content-box;
}

background: rgba(35,0,0,0.5) url(‘cakes.png’) no-repeat right bottom fixed;

background: linear-gradient(to top, yellow, blue, green), URL(“cake.png”);

nav{
  background-image: linear-gradient(to bottom left, yellow, green 35%, blue 45px);
}
nav a{
  color: #ff0000;
}
div{
  background-image: linear-gradient(75deg, red, blue, orange 5em, coral, purple);
}

nav{
  background-image: linear-gradient(to bottom left, yellow, green 35%, blue 45px);
  background-size: 100px 100px;
}

nav a{
  color: #ff0000;
}

nav{
  background-image: linear-gradient(to bottom left, yellow, green 35%, blue 45px);
  background-size: 100px 100px; 
  border-radius: 20px;
}
nav a{
  color: #ff0000;
}
This will apply equal border-radius to all corners.

nav{
  background-image: linear-gradient(to bottom left, yellow, green 35%, blue 45px);
  background-size: 100px 100px; 
  border-radius: 20px 10px 5px 25px;
}

nav{
  background-image: linear-gradient(to bottom left, yellow, green 35%, blue 45px);
  background-size: 100px 100px; 
  border: 20px solid coral; 
  background-clip: padding-box; 
  border-image-source: url("Cakes.jpg"); 
  border-image-slice: 20; border-image-repeat: space;
 }

nav a{color: #ff0000;}