What is the Box Model in CSS

In this lesson, let's discuss more about how to resize elements.

Consider this example:

This widget lets you define the width, height, border width, and padding. On the right side, you will see the corresponding element box, and its size.

Notice that the actual size of the element does not match the size that you defined.

This is because when you set the width and height, the browser assumes you refer to the size of the content box.

This can be counterintuitive sometimes because when we define the size, we usually mean the size of the border.

To fix this issue, you can overwrite the browser's default actions by setting the box-sizing property to border-box.

p {
  box-sizing: border-box;
 
  border: 10px solid black;
  padding: 10px;
 
  width: 200px;
  height: 50px;
}

And this time, the size of the box will remain 200x50px, regardless of padding and border width.

Minimum and maximum sizes

Instead of setting a fixed dimension, you can also be more flexible by specifying the maximum and minimum sizes.

For example, you can define the maximum width of the <p> element as 400px.

p {
  border: solid 2px;
  max-width: 300px;
}

Use the slider to resize the element.

Notice that, at first, the element grows with the slider, until it reaches the max limit and stops there.

The minimum value works the same way, just in the opposite direction.

p {
  border: solid 2px;
  min-width: 100px;
}

You can specify both max and min values to ensure the size is always within the defined limit.

This is crucial for a design concept called responsive design, which we will discuss later.