CSS - The Box Model

Jun 11, 2026 3:00pm UTC (Check your timezone)

Theory Workshop Lab Review Quiz

Instructors: Jess, Carmen, and Eda

The Box Model

Download iCal File

Before this session, please:

During this session, we’ll:

After this session, please:

Instructor notes

Working with CSS Transforms, Overflow, and Filters: What Is Overflow in CSS, and How Does It Work?

An element can overflow, meaning that its size can exceed the size of its container element.

An overflow can be in two dimensions:

We can control the overflow behavior with properties like overflow, overflow-x, and overflow-y.

Working with CSS Transforms, Overflow, and Filters: What Is the CSS Transform Property, and How Does It Work?

We can apply various transformations to elements, such as rotating, scaling, skewing, or translating in 2D or 3D space.

The transform property applies a mathematical transformation to an element’s coordinate system. It allows us to change its shape and position while keeping the document flow intact.

We can move an element with the translate function, which can take values for the x-axis and the y-axis.

This will be 50px to the right, 100px down from its original position:

1transform: translate(50px, 100px);

We can rotate an element around a fixed point with the rotate function, which takes a value representing the angle of the rotation.

This will be rotated 45 degrees clockwise:

1transform: rotate(45deg);

We can change the size of an element with the scale function, which takes values for horizontal scaling and vertical scaling.

This will make it half times wider and twice as tall:

1transform: scale(1.5, 2);

The values to transform property can be combined, such as:

1transform: translate(50px, 100px) rotate(45deg) scale(1.5, 2);

There are some accessibility concerns we should be mindful of:

Working with CSS Transforms, Overflow, and Filters: What Is the CSS Box Model, and How Does It Work?

The CSS Box Model is a way to define how HTML elements are structured.

Every element is surrounded by a box. There are four components to the box:

We can define the padding, border, and margin with CSS properties we’ve seen before, such as border, padding, and margin!

Working with CSS Transforms, Overflow, and Filters: What Is Margin Collapsing, and How Does It Work?

There are some cases when margins of two elements can collapse, resulting in a single margin.

Adjacent elements: When the vertical margins of neighboring elements overlap, it will result in a single margin, which is the larger of the two.

For example, in a case where an element has 20px bottom margin and the other has 30px top margin (two elements being stacked vertically), the resulting margin between them will be 30px (instead of adding them together, resulting in 50px).

1<div class="box1">Box 1</div>
2<div class="box2">Box 2</div>
1.box1 {
2  margin-bottom: 20px;
3}
4
5.box2 {
6  margin-top: 30px;
7}

Parent and first/last child: When there’s no border, padding, or content in the parent to separate the parent’s margin from the child’s, their margins will collapse.

For example, if the “empty” parent has 40px top margin, and the child has 30px top margin, the result will be 40px instead of 70px.

1<div class="parent">
2  <div class="child">Child element</div>
3</div>
1.parent {
2  margin-top: 40px;
3}
4
5.child {
6  margin-top: 30px;
7}

An “empty” element: When an element has no content, padding, or border, its top and bottom margins can collapse.

For example, if an empty div that has no height has different top and bottom margins, the resulting “empty” space will be that of the larger margin. In the example below, it will be 20px:

1<div class="empty"></div>
1.empty {
2  margin-top: 20px;
3  margin-bottom: 10px;
4  height: 0;
5}

Working with CSS Transforms, Overflow, and Filters: What Is the Difference Between content-box and border-box?

The box-sizing property in CSS can have two values:

With content-box, the width and height we set for the element applies to the content area only, not including the padding, border, and margin.

With border-box, the width and height we set include the element’s content, padding, and border (not margin). This is more helpful for responsive layouts because the element’s total size stays fixed when the padding or border changes.

Working with CSS Transforms, Overflow, and Filters: What Is a CSS Reset, and What Are Some Common Examples?

To remove the default styling that browsers apply to HTML elements, we can use a CSS reset, which is helpful for improving consistency across browsers.

We can define custom CSS resets as well as use a third-party CSS reset.

A simple example for a starting point is removing the margin and paddings of all elements:

1* {
2  margin: 0;
3  padding: 0;
4}

Some of the third-party CSS resets are:

We should also be mindful of accessibility when using CSS resets, and avoid resetting styles that might be helpful for assistive technologies.

Working with CSS Transforms, Overflow, and Filters: What Is the CSS Filter Property, and What Are Common Examples?

We can define effects such as blurring, color shifting, and contrast adjustments for an element using the filter property.

The blur function applies a Gaussian blur, it takes in the amount in pixels which represents the radius of the blur.

1filter: blur(2px);

The brightness function adjusts the brightness of the element. For example, the value of 0% will make the element completely black, and the values over 100% will increase the brightness.

1filter: brightness(150%);

The grayscale function converts the element to grayscale. It takes a value which is the amount in percentages. For example, 100% makes it completely grayscale.

1filter: grayscale(100%);

The sepia function applies a sepia tone to an element. Similar to grayscale, it takes a value which is the amount of percentages.

1filter: sepia(80%);

The hue-rotate function applies a hue rotation to an element. It takes a value in degrees, representing a rotation around the color circle.

1filter: hue-rotate(90deg);

The values to filter property can be combined, such as:

1filter: brightness(150%) sepia(80%);

There are also other functions such as contrast, invert, and saturate.

Design a Rothko Painting

In this fun exercise, we’ll practice our knowledge of the CSS box model!

Build a Confidential Email Page

We’ll take a look at this exercise that goes over what we’ve learned so far.

CSS Layouts and Effects Review

In this unit, we’ve covered a lot of ground! Some of the concepts we’ve looked at are: