Blog

Basic Introduction to The CSS Box Model

the css box model and content box

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.

the css box model in the content box

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;

  1. 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:

Content Overflow in the CSS Box Model

There are times we may set absolute value for our content boxes using the width/ height property. And when the size does not contain the content of the box, the content will tend to overflow the box.

For example:

In our above HTML code, let us tweek our CSS as follow:

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

The output will be like this:

Notice that part of the content could not contain in the box. We call this overflow.

How do we handle such a situation?

By default, when content overflows, the visible value is used to show the content outside the box. However, we can control this using the overflow property.

The overflow property has the following values:

auto: If the content overflows, the overflown content will be hidden and scroll bars will be shown so that users can scroll through the content. For example, add overflow to the above CSS to have the following:

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

Edit the above code in JSFiddle to see the output.

hidden: This value when used will completely hide the overflown content.

visible: This is the default behavior. It shows the overflown content outside the box.

The Background Property

Background Clip Property

This is used to control how background-color and/or background-image is applied to an element in the CSS box model.

By default, background-color and background-image extends to the edge of a border. This can be controlled using the following declarations:

background-clip: value;

value can be any of the following: border-box; padding-box or content-box.

Background-clip: border-box: This is the default. Background color and image extends to the edge of the border box.

For example:

<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;
}

Background-clip: padding-box: When this declaration is used, the background color or image will extend to the edge of the padding only.

Changing our CSS above, we have:

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

Notice that the background color has separated from the border.

Background-clip: content-box: This will ensure that the color or image covers only the content box. Changing the CSS, we have:

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

The above CSS changes were combined in the HTML and CSS codes below.

Adding background

A background is a color or image sitting behind the content of an element. It usually adds beauty when the element is displayed.

Before adding a background to an element, we should understand the following properties:

background-size: which is used to dynamically resize a background image.

background: We use the background property to apply background to an element. It is used as a shorthand to specify the following properties which can also stand on their own.

  • background-color (used to set a solid color),
  • background-image (used to set a background image or linear-gradient),
  • background-position (used to position the background within the element),
  • background-repeat (used to specify if a background should be tiled or covered), and
  • background-attachment (used to identify the behavior of a background).

To use a background property, we specify it thus:

background: background-color background-image background-repeat background-position background-attachment

which gives us

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

You will understand the above code later in this tutorial.

Applying multiple background

You can also use the background property to apply multiple backgrounds to an element.

For example:.

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

The images or background color will be applied in the following order:

  • the first (linear gradient) will appear on the top,
  • while the second (image) will be behind it.

If you have up to 4 images, then the first will appear at the top and the last behind them all.

NOTE: When a background image is used, by default, it tiles the image in the background. But this depends on the size of the image used.

For example, if the image is large, it will cover the entire space, if the image is small, it will be tiled by default.

Let’s look at some of the properties highlighted above individually.

Background Repeat property

We can use background-repeat property to remove tiled images in the background.

The background-repeat property has the following values:

  • repeat (image is tiled)
  • no-repeat (image is not tiled)
  • repeat-x (image repeated along the x-axis)
  • repeat-y (image repeated along the y-axis)

Try using each of the values and see what happens.

Background-position

Aside from background-repeat, we can use background-position to specify the location of the image inside the element. The background-position property can have any of the following values: pixels, percentages, or keywords such as: right center, left, center, top and bottom.

Linear gradient

We may use linear-gradient to apply background. In this case, we will need to specify how the gradient will be applied by using keywords like: to top, to bottom, to left, to right, to top left, etc. We may also use deg such as 40deg, 180deg, etc.

When applying color mixture, we can also specify values for the color using percentages or pixels.

For example:

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);
}

background size

When dealing with background-image, we may use background-size property to resize the image so that it could fit within the element. This can be especially useful for image icons.

For example:

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

nav a{
  color: #ff0000;
}

We may also use the background-attachment property to control if the background scrolls when the content scrolls. The background-attachment has the following values: scroll, fixed and local.

Adding border

We have learned how to add borders under content box. Here, we will look at how to make our borders have a rounded edge, and how to use an image as a border.

border-radius: The border-radius property is used to create a rounded border around an element in the CSS box model. To use this property, we do this:

border-radius: value in pixels (This will apply the same value to all corners).

e.g. border-radius: 15px;

border-radius: top-left top-right bottom-right bottom-left

For example, using our HTML above, we apply the following CSS:

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;
}

This will apply unequal border-radius to the corners.

border-image: This property is used to apply the image as a border in the CSS box model.

Applying border-image requires the use of the following additional properties:

background-clip: padding-box, this will separate the background from the border area. Then we need the following properties to make the border-image work:

border-image-source: The source of the image

border-image-slice: to specify the size of the image slice. It can take one, two, three or four values. You can use a unitless value, say, 20.

border-image-repeat: This will tell how the image will fill the border. It has the following values: repeat, stretch, round, and space.

Let us illustrate with the following CSS on our HTML above.

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;}

Try changing the value of border-image-repeat to see the differences.

The shortcut for using border-image is as follow:

border-image: border-image-source border-image-slice border-image-repeat

e.g. border-image: url(‘Cakes.jpg’) 20 stretch

The output is as follow:

Shadows effect

Apply drop shadows to your boxes using the box-shadow property and to your texts using the text-shadow property.

The box-shadow and text-shadow properties have the following values:

  • horizontal offset,
  • vertical offset,
  • blur radius and
  • base color.

Each of these values can take normal CSS lengths in pixels. For example:

box-shadow: horizontal_offset vertical_offset blur_radius base_color

text-shadow: horizontal_offset vertical_offset blur_radius base_color

e.g. box-shadow: 5px 4px 3px green;

text-shadow: 2px 3px 2px blue;

Using our HTML code above, let us apply shadow effects on the elements:

You can also apply multiple shadow effects to your texts and boxes by stacking them together, separated by a comma.

E.g. box-shadow: 2px 3px 1px red, 1px 1px 2px blue

To add internal shadow effects, we use the keyword inset before the values.

E.g. box-shadow: inset 3px 3px 2px red

The filter property

When we apply shadow effects, the drop shadow usually follows the rectangular square of the box.

However, we can make the shadow follow the exact shape of the box by applying the filter property together with the drop-shadow() function.

In our example above, let us apply drop-shadow() function to filter out the shadow effect.

Classes of CSS Boxes

CSS boxes can be classified into 6 based on how they are displayed. To represent them we use the display property. They include inline, inline-block, block, flex, grid and table.

Using the display property, we can tell the boxes how they will render or be displayed in a CSS layout. Though the display property has other values, the following 3 are most common, namely: block, inline, and inline-block.

display: block – When block is used as a display property value, then the element with the value will begin on a new line and occupy the entire horizontal line.

All other successive elements will be pushed to the next line accordingly. Hence, this will create boxes of stacked elements on each other. Blocks can be sized using height and width properties. For example:

Notice that after the application of the display: block, each <a> element occupied the entire horizontal line.

display: inline – This type creates a continuous flow of text without line breaks. When display is inline then subsequent inline elements appear in the same horizontal line with each other and flows with normal text flow.

Heights and widths properties do not have effect on such block elements with inline display.

From the above HTML and CSS code, we can change the display to inline and have the following output.

display: inline-block: This type also creates a continuous flow of text on the same horizontal line without line breaks. But each block element maintains its block integrity. Hence, each block element can be sized with the width and height properties.

Let us change the display value to inline-block. In the output, there is no appreciable difference, but a closer look at the block elements will show that each block maintains its integrity. They will not flow with the text unlike with the inline value.