One of the best ways to control your website's design and functionality is CSS.

CSS — or Cascading Style Sheets — enables you to make stylistic changes to your web page layouts and to the elements on those pages to ultimately improve your site's look and feel. Before you do so, you need to first understand one of the most fundamental principles of web design: the CSS box model. 

Free Intro Guide to HTML & CSS [Download Now]

Here’s an example that illustrates each layer of the CSS box model. We'll discuss these layers in more depth below

CSS Box Model Illustration showing the padding, border, and margin around an element

Image Source

This means any web page you see is actually made up of elements wrapped in rectangular boxes and arranged in relation to each other. These elements can exist beside, above, below, and within each other, depending on the type of element they are. 

There are two types of HTML elements: block-level elements and inline elements. Let's take a closer look at each below. 

Block-Level Elements

By default, block-level elements start on a new line and take up 100% of the space available — which might be the full width of the viewport or of its container if it’s inside another element. Since they start on a new line by default, block-level elements break the flow of the document.

As mentioned before, block-level elements can contain other elements, including inline elements and other block-level elements. For example, a div element can contain a heading, paragraph, or another div element.

With the padding, border, and margin properties applied to a block-level element, other elements will be forced away from the box around the element. As a result of this — and the fact that they span the full width of their container — block-level elements take up more space than inline elements and can therefore create larger structures.

Of course, the width and height of these elements can be specified in CSS to take up less space.

Block-level elements include the following: <p>, <h1>, <h2>, <h3>, <h4>, <h5>, <h6>, <ol>, <ul>, <pre>, <address>, <blockquote>, <dl>, <div>, <fieldset>, <form>, <hr>, <nonscript>, and <table>.

Inline Elements

By default, inline elements do not begin on a new line or take up the full width of the viewport. In fact, width and height properties do not apply. Unlike block-level elements, inline elements do not break the flow of the document. 

Inline elements can contain other inline elements and data, but not block-level elements. For example, a paragraph element can contain an emphasis element — but not a heading element. 

If the padding, border, and margin properties are applied vertically, then other inline boxes will not be forced away from the box around the element. If the padding, border, and margin properties are applied horizontally however, then other inline elements will be forced away from the box around the element.

Inline level elements include <b>, <big>, <i>, <small>, <tt>, <abbr>, <acronym>, <cite>, <code>, <dfn>, <em>, <kbd>, <strong>, <samp>, and <var> — among others.

Here's a helpful illustration of the key differences between inline and block level elements. This example using Bootstrap CSS displays an inline button and a block-level button. 

Bootstrap buttons styled inline and block-level

Image Source

CSS Box Model Examples

Now, let’s examine the CSS box model in action with these CSS box model examples. Each example focuses on a specific layer of the box, moving from the inside out. We'll start with the content area.

Content Area Example

The innermost rectangle, known as the content area, may contain text or other visual elements.

Its dimensions are the content width and content height. When specified, the width and height attributes determine the content edge or perimeter of the content box.  Often, the width and height aren't specified so the rendered content determines the content edge. In other words, the content area is only as wide and as at all as it needs to be to hold the content, which might be as little as one word. If the element is a block element, then the content edge can also be set with the min-width, max-width, min-height, and max-height properties. 

Let's look at an example of a standard CSS box model.

In a standard CSS box model, the height and width attribute are specified. This determines the size of the content area. If the padding, border, and margin properties are also specified, then they must be added to the width and height to calculate the total size of the element.

Say you specify the content width to 400px and add 30px padding, 10px border, and 10px margin. Then the total width of the box is 500. You get that total by adding the content-width, padding-left and padding-right, border-left and border-right, and margin-left and margin-right (400 + 30 + 30 + 10 + 10 + 10 + 10). The total height of the box is 250. You get that by adding the content-height, padding-top and padding-bottom, border-top and border-bottom, and margin-top and margin-bottom (150 + 30 + 30 + 10 + 10 + 10 + 10).

Here's the CSS:

 
div {
background-color: #DDDDDD;
width: 400px;
height: 150px;
padding: 30px;
border: 10px solid #FF00FF;
margin: 10px;
}

Here's the HTML:

 
<h2>The Standard CSS Box Model</h2>

<p>In a standard CSS box model, the height and width attribute is specified. This determines the size of the content area. If the padding, border, and margin properties are also specified, then they will be added to the width and height to calculate the total size of the element.</p>

<div>This text makes up the content layer of the box. Since I've added 30px padding, 10px border, and 10px margin, the total width of the box is 500. You get that by adding the content-width, padding-left and padding-right, border-left and border-right, and margin-left and margin-right (400 + 30 + 30 + 10 + 10 + 10 + 10). The total height of the box is 250. You get that by adding the content-height, padding-top and padding-bottom, border-top and border-bottom, and margin-top and margin-bottom (150 + 30 + 30 + 10 + 10 + 10 + 10). </div>

Here's the result:

Standard CSS box model example with content width and height attributes defined explicitly

Image Source

Since adding up the border, padding, and margin to calculate the real size of the box can be time consuming, you can use the alternative box model. To “turn on” this model, use the box-sizing property and set it to “border-box.” This will tell the browser to render the box (including everything but the margin) to the size you set. We'll use this model in the example below.

Padding Example

Padding is the space between the border and content of an element. Padding is an important element in web design because it helps make content more visible and readable. 

An element's padding can be defined with the following properties: padding-top, padding-bottom, padding-left, padding-right, or the shorthand property padding.

If you'd like to add the same amount of padding on all four sides of the content area, then you can set the shorthand padding property with one value. If you'd like to set different amounts of padding, then you can use the long-form method. Let's use both methods in the example below. 

Here's the HTML:

 
<h2>The Alternative CSS Box Model</h2>

<p>In the alternative CSS box model, a defined width or height attribute will determine not only the size of the contetn area but the size of the border, padding, and content areas of a box. If specified, thte margin will still have to be added to calculate the total size of the element. </p>

<div id="shorthand">Since I've set the box-sizing property to "border-box," the total width of the element will be 320px (the set width + margin-left and margin-right). Since the height of the div has not been explicitly defined, the height is the distance between the top of the topmost line box and the bottom of the bottommost line box. In other words, its the height of the rendered text.
</div>
<div id="longform">A div with almost the same CSS applied to it — except for the padding property. For this div, different padding is applied to each of its four sides rather than equal padding applied to all sides.
</div>

Here's the CSS:

 
#shorthand {
background-color: #DDDDDD;
box-sizing: border-box;
width: 300px;
padding: 30px;
border: 10px solid #FF00FF;
margin: 10px;
}
#longform {
background-color: #DDDDDD;
box-sizing: border-box;
width: 300px;
padding-top: 20px;
padding-bottom: 10px;
padding-left: 80px;
padding-right: 60px;
border: 10px solid #FF00FF;
margin: 10px;
}

Here's the result:

The alternative CSS box model example using padding shorthand and longform methods

Image Source

Borders Example

The border property lets us add and style a line around the content padding area. The thickness, color, style of this line can be defined by the border-width, border-color, and border-style properties, or you can use the shorthand border property to define all three. Border-style values include solid, dotted, dashed, double, groove, ridge, and none.

The dimensions of the border area are the border-box width and border-box height. When specified, the width and height attributes determine the perimeter of the border area. If the box-sizing property is set to border-box, you can also define the border size with min-width, max-width, min-height, and max-height.

Let's use the max-width and min-height properties in the example below. We'll also use as many properties and values as possible to show the versatility of the border area. 

Here's the CSS:

 
h2 {
box-sizing: border-box;
max-width: 300px;
border: 2px solid #A00081;
padding: 5px;
}
p {
box-sizing: border-box;
min-height: 100px;
border: 2px solid #F00081;
padding: 5px;
}
blockquote {
background-color: #DDDDDD;
box-sizing: border-box;
width: 300px;
padding: 30px;
border-right: 2px dashed #000000;
border-left: 10px groove #8866AA;
border-top: 5px dotted #AAAAAA;
border-bottom: 20px solid #2266AA;
margin: 10px;
}

Here's the HTML:

 
<h2>The Borders CSS Box Model</h2>

<p>In this CSS box model, a defined max-width constrains the content width of the heading and a defined min-height constrains the box height so that it;s taller than the rendered text.</p>

<blockquote>Using CSS, I can style each side of the border area of this blockquote to be unique. The border-right, border-left, border-top, and border-bottom properties are all defined with three values: the first defines its width, the second its style, and the third its color.
</blockquote>

Here's the result:

CSS Box model example using the border-style, border-width, and border-color properties

Image Source

Margins Example

The margin is the empty space separating the element from its neighbors, and the outermost layer of the CSS box model. Its dimensions are the margin-box width and the margin-box height.

Its size can be defined by the following properties: the margin-left, margin-right, margin-top, margin-bottom properties or the shorthand margin property.

If the shorthand property is used, and only one value is defined, then it applies to all sides of the element. If two values are defined, then the first value represents the top and bottom margins and the second represents the right and left margins. If  three values are defined, the first value represents the top margin, the second represents the left and right, and the fourth represents the bottom margin. If four values are defined, they represent the top, right, bottom, and left, respectively.

Before we dive into an example, you may realize that margins and padding seem similar. In case you get confused what the right option is for a certain element or layout, consider the following key differences between CSS margin and padding:

  • Margin is the space outside of the border area, whereas padding is the space inside the border area. 
  • Margin backgrounds are always transparent, whereas the background of the padding area of a box is specified by the background property of the element. 
  • When increased, margins increase the gap between an element and any adjacent elements. When increased, padding increases the size of the element.
  • In CSS, adjoining margins of two or more boxes can combine to form a single "collapsed" margin. While margin areas can collapse vertically, padding areas cannot.

Let's look at an example of a CSS box model with a collapsed margin. 

Say a heading and paragraph are stacked on top of each other. The heading has a bottom margin of 60px and the paragraph has a top margin of 40px. To figure out the vertical margin between the heading and paragraph, you might be tempted to add both margins together for a total margin of 100px. That would look something like this: 

CSS box model with margin-bottom property set

Image Source

However, the actual vertical margin would only be 60px. Why? Because the two margins collapse vertically. Here's how it would actually look on the front end:

CSS Box Model example with collapsed margin

Image Source

Using the CSS Box Model for Your Website

The CSS box model is one of the fundamentals of website development. Understanding this model will enable you to better align elements with other elements and create more complex layouts. 

New Call-to-action

 css introduction

Originally published Nov 17, 2020 7:00:00 AM, updated November 17 2020

Topics:

Bootstrap & CSS