One of the best ways to control your website design and functionality is with CSS (Cascading Style Sheets).

CSS empowers you to make stylistic changes to improve your website’s look and feel. With a bit of insight into CSS, you can customize any design aspect of your site.

The CSS box model is one of the fundamental principles of web design.

Free Intro Guide to HTML & CSS [Download Now]

Taking the time to understand what makes it tick will help you to quickly make changes on your company website or any quick landing pages you spin up for timely campaigns.

To understand the CSS box model, you must first consider the idea behind it. Any web page you see is made up of rectangular boxes arranged in relation to each other. They are beside, above, below, and within each other.

In design, these are not referred to as "rectangular boxes" but HTML elements.

css box model html elements

Source

There are two types of HTML elements: inline and block-level elements. The differences between these elements affect how you use the box model.

Inline level elements:

  • Can appear within the body of an HTML page
  • Contain data and other inline elements
  • Don't begin on new lines by default
  • Create shorter structures

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

Because inline level elements only occupy as much space as needed, don't start in a new line by default, and don't push other elements around, the CSS box model mostly applies to block level elements.

Block level elements:

  • Can appear within the body of an HTML page
  • Can contain other elements, both inline and block level
  • Start on new lines by default
  • Create larger structures than inline elements

Block elements include p, h1, h2, h3, h4, h5, h6, ol, ul, pre, address, blockquote, dl, div, fieldset, form, hr, nonscript, and table.

The box around each HTML element on the page comes in different layers that can be changed independently with CSS.

These elements include margin, border, padding, and content as shown below:

css box model margin border padding content

Source

The content is contained in the innermost rectangle. This may be the text or other visual elements.

The dimensions of this box are as shown: Content width (content box width) and content height (content box height).

When the box-sizing property is set to content-box for a block element, the size of the content area can be defined by width, min-width, max-width, height, min-height, and max-height.

Padding is the space between the border and content of an element. One reason why this is so important is to ensure that content is visible. Its dimensions are as shown above.

The size of the padding is defined with: padding-top, padding-bottom, padding-left, padding-right and the shorthand property padding.

Further out is the border. Its size is defined by border-width and border (shorthand).

When box-sizing is set to border-box, you can define the border size with width, min-width, max-width, height, min-height, and max-height.

The margin is the empty space separating the element from its neighbours.

Its size is defined by: margin-top, margin-right, margin-bottom, margin-left, and shorthand property margin.

CSS Box Model Examples

Now, let’s examine the CSS box model in action with these CSS box model examples.

Padding

Starting from the inside, define the padding using the padding property.

css box model padding example

Source

When this CSS is applied, each side of the <h1> heading adds 50 pixels:

css box model padding example

Source

If you want to style only one side of the element, you can use any of the four properties offered by CSS as shown below:

css box model padding example properties

Source

Remember, you can also use the padding shorthand property that lets you set the top, bottom, left, and right padding using only one line of CSS.

Borders

The border property lets us add and style a line around the content padding.

css box model border example

Source

This code tells the browser to draw a thin gray line around the box containing the content and padding. As with padding, there are four sides of the border that you can style independently.

If you're using a front-end development framework like Bootstrap CSS, then you'll have even more options for adding and styling a line around the content padding. 

Using Bootstrap cards, a flexible and extensible content container, you can change their border color to one of eight built-in options. Take a look at the blue border below, for example. 

Bootstrap CSS box model example with blue borderSource

Here's the code:

 

 

   <div class="card border-primary mb-3" style="max-width: 18rem;">

  <div class="card-header">Header</div>

  <div class="card-body text-primary">

    <h5 class="card-title">Primary card title</h5>

    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>

  </div>

</div>

 

Margins

Now, we’ll define space outside the border.

css box model margin example

Source

This adds a 50 pixel margin at the bottom of each <p> element. The margin property also allows shorthand formats.

You may realize that margins and padding are very similar. In case you get confused as to the right option for a given situation, consider the following tips:

  • Margins are transparent, while the padding has a background.
  • Unlike margins, padding is included in the click area of the element.
  • Margins collapse vertically while padding never does. This makes the choice easy when you want to prevent collapsing. Margin collapse is useful when you're working with various elements.

If none of these tips help, no need to panic — just pick one. CSS is flexible and allows you to solve problems using different approaches.

Use the CSS Box Model for Your Website

The CSS box model will not only help you better understand how websites work, but can also be useful for your day-to-day marketing tasks, some of which are simple but incredibly significant to the overall effort.

New Call-to-action

 css introduction

Originally published Mar 12, 2020 12:41:17 PM, updated March 31 2020

Topics:

Bootstrap CSS