[CSS Tricks] : Changing the default box model

One common trick in CSS is to use the box-sizing property to change the default box model for an element.

By default, the box model in CSS defines the dimensions of an element as the sum of its content, padding, and border. This means that if you specify a width and height for an element, the actual dimensions of the element will be larger than the specified values, due to the space occupied by the padding and border.

However, you can use the box-sizing property to change this behavior, and make the dimensions of an element include its padding and border. This can be useful if you want to specify the dimensions of an element accurately, and avoid having the dimensions of the element change due to the padding and border.

Here is an example of how you can use the box-sizing property to change the box model for an element:

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

In this example, the box-sizing property is set to border-box, which means that the dimensions of the element will include its padding and border. This means that the actual dimensions of the element will be 300px x 200px, even though the padding and border add an additional 40px to the width and height of the element.

By using the box-sizing property, you can easily control the dimensions of an element, and avoid unexpected changes to the layout of your web page due to the padding and border of the element.