MakeW3web

Box sizing

Box sizing is a CSS property that determines how an element's total width and height are calculated. There are two possible values for the box-sizing property: `content-box` and `border-box`.

When `box-sizing` is set to `content-box`, the element's width and height are calculated based on the element's content, which includes the text, images, and any padding or margin. In other words, the width and height of the element do not include the border or padding.

For example, let's say you have a `<div>` element with a width of 300px, a height of 200px, and a padding of 10px. If `box-sizing` is set to `content-box`, the total width of the element will be 320px (300px + 2 x 10px padding) and the total height will be 220px (200px + 2 x 10px padding).

On the other hand, when `box-sizing` is set to `border-box`, the element's width and height are calculated based on the element's content, padding, and border. In this case, the width and height of the element include the border and padding.

For example, if you have the same `<div>` element as before, but this time `box-sizing` is set to `border-box`, the total width of the element will be 300px (the original width) and the total height will be 200px (the original height).

Here's an example of how to set `box-sizing` to `border-box`:

.box {
  box-sizing: border-box;
  width: 300px;
  height: 200px;
  padding: 10px;
  border: 1px solid black;
}

In this example, the `.box` element has a total width of 300px (the original width) and a total height of 200px (the original height), including the padding and border.

In summary, `box-sizing` is a CSS property that determines how an element's total width and height are calculated. It can be set to `content-box` or `border-box`, and it's important to understand the difference between the two when working with CSS layouts.

Was this page helpful?