sikiru

Posted on Jan 10 • Edited on Feb 26 • Originally published at Medium

A Beginner’s Guide to the CSS Box Model

#css #webdev #beginners #learning

The CSS box model is a fundamental concept that allows you to layout and align elements on a webpage. Mastering the box model is essential for controlling spacing, sizing, positioning and designing the overall layout of a web page.

In this beginner’s guide, we’ll cover everything you need to know about the CSS box model including:

What is the CSS Box Model?
Box Model Properties
- Content
- Padding
- Border
- Margin
Box Sizing
Display Property
Block vs Inline Boxes
Width and Height
Box Model Design Examples

By the end, you’ll have a solid understanding of the box model and how to harness its power to create complex and responsive web page layouts. Let’s get started!

What is the CSS Box Model?

The CSS box model represents every element on a web page as a rectangular box. It consists of:

Content: The content inside the element such as text, image etc.
Padding: The transparent space surrounding the content.
Border: The area surrounding the padding (if any) and content.
Margin: The transparent space surrounding the border.

Here is a diagram of the box model:

Understanding these components allows you to precisely control spacing, positioning and the alignment of HTML elements on the page.

Now let’s look at each component in more detail.

Box Model Properties

Content

The innermost part of the box filled with content such as text, images, etc. This is the area inside the padding, border and margin.

To set the height and width of the content area, use the height and width properties. For example:

.box {
  height: 300px;
  width: 300px; 
}

Padding

The transparent area surrounding the content. Padding creates space between the content and the border.

Padding can be set on all four sides of an element with the padding property. For example to add 50px of padding on all sides:

.box {
  padding: 50px;
}

You can also target a specific side, such as padding-top, padding-right, padding-bottom and padding-left.

Padding will expand the total width and height of the box. If you set a width and height, the padding is added on top of those dimensions.

Border

The border surrounds the padding and content. It defines the edge of the element.

Borders have a border-width, border-style (solid, dotted, etc), and border-color.

For example:

.box {
  border: 5px solid blue;
}

This will create a 5px wide solid blue border around the content and padding.

Borders also add to the total width and height of the element.

Margin

The transparent outer space surrounding an element. Margins create space between boxes and help separate elements.

A margin clears an area around the border. We can target a specific side just like padding, using margin-top, margin-right, margin-bottom and margin-left.

Or set a margin on all sides at once:

.box {
  margin: 20px; 
}

Margins collapse vertically, meaning the larger margin between elements will be used, avoiding double margins.

Now that we’ve looked at each component individually, let’s discuss an important concept that affects the box model.

Box Sizing

By default in CSS, the width and height you set on an element apply only to the content area.

So padding, borders and margins are added on top of those dimensions.

That means if you set a width of 300px, the total box width would be:

300px content + 25px padding on the left + 25px padding on the right + 2px border on the left + 2px border on the right = 354px total width

This default box-sizing is called content-box.

However, you can change this behavior by setting box-sizing: border-box. This makes the width and height apply to the border box - encompassing the content, padding and border.

Now the total width would always be 300px no matter the padding and border values. The content area shrinks to compensate.

This makes it much easier to reason about dimensions.

So in most cases, you’ll want to set:

*, *::before, *::after {
  box-sizing: border-box;
}

This sets border-box sizing on all elements and pseudo elements.

Display Property

The display property controls how an element is displayed on the page. It has a large impact on how the box model works and the page layout.

The two most common values are:

block
- Displays an element as a block level box that breaks the flow and stacks vertically. Width defaults to 100% of the parent element.
inline
- Displays an element inline with the flow of text, no line breaks before or after. Width defaults to the content size. You’ll most commonly use display: block on divs and display: inline on spans.

But display also allows more complex layouts like flexbox and grid. We’ll learn about those more advanced techniques later.

Block vs Inline Boxes

Since the display property is so important, let’s look closer at how block and inline boxes behave.

Block boxes:

Break the flow and stack vertically
100% parent width by default
Can set width and height
Respect padding, border and margin on all sides
For example:

<div></div>

elements are block by default.

Inline boxes:

Flow content horizontally
Only respect left and right padding and margins
Cannot set width and height
Padding and margins do not affect vertical spacing
For example:

<span></span>

elements are inline by default.

Knowing if an element is block or inline helps explain spacing and layout behavior.

Width and Height

The width and height properties control the content area size.

Width and height can be set in various ways:

Pixels

width: 500px;

Pixels give you precise control. But pixel dimensions don’t respond when the page size changes.

Percentage

width: 50%;

Percentages are responsive and scale relative to the parent element size.

auto

width: auto;

Auto sets the width automatically based on the content size. This is the default for block elements.

max-width / min-width

max-width: 500px;
min-width: 250px;

Sets a maximum or minimum width value that scales responsively. Useful to constrain a box and keep it responsive.

vh / vw

width: 50vw;
height: 50vh;

Viewport units scale off the viewport size (browser window size). vw = percentage of the viewport width. vh = percentage of viewport height.

This allows fully responsive and viewport relative units.

Now that we’ve covered the core concepts, let’s see some examples of the box model in action!

Box Model Design Examples

With an understanding of the box model components, you can layout and align elements precisely.

Here are some common use cases and layout examples.

Two Column Layout

A simple two column layout with a left sidebar and right content area:

.container {
  display: flex; 
}
.sidebar {
  flex: 1;
  margin-right: 20px;
}
.content {
  flex: 2;  
}

This uses flex-box to split the container into a ratio of 1 sidebar to 2 content columns. Margins separate the elements.

Responsive Center Box

To center a box horizontally and make it responsive:

.center-box {
  margin: 0 auto;
  max-width: 500px;
}

Auto left and right margins center the box. Max-width keeps the box responsive.

Fixed Sidebar, Flexible Content

To create a sidebar with fixed width and flexible content area:

.container {
  display: flex;
}
.sidebar {
  width: 200px;
}
.content {
  flex: 1; 
  min-width: 500px;
}

The sidebar width is fixed at 200px. The content fills the remaining space with a min-width of 500px.

Card Layout

A card-based layout with equal margin spacing:

.card {
  display: inline-block;
  width: 300px;
  margin: 20px;
  border: 1px solid #eee;
}

Display inline-block lets the cards flow horizontally. Width and margins control spacing and sizing.

Vertical Center

To center text or elements vertically:

.center {
  height: 100vh;
  display: flex;
  align-items: center;
}

Height 100vh makes the box full screen height. Flex-box centers items vertically with align-items.

There are many more examples, but these should give you ideas for common layouts and designs with CSS box model properties!

Conclusion

We’ve covered all the fundamentals of the CSS box model, from margin to border to padding to content. With this knowledge, you can start building precise, responsive page layouts.

Here are some key takeaways:

The box model comprises content, padding, border and margin
Use box-sizing: border-box for easier sizing
Display controls block vs inline box behavior
Width, height, padding, margins & borders can be set separately
Max/min width/height help make responsive boxes

For further learning, look into responsive design patterns and advanced layout methods like CSS flex-box and grid.

The box model is core to mastering CSS. With it, you can bring designs and layouts to life on the web!

DEV Community