Learn CSS BOX MODEL

Introduction

On the web everything is a box literally everything all the elements, images, buttons, paragraphs, videos, and everything. With everything being a box it has a BOX MODEL applied. So what is a CSS BOX MODEL? In this article, we will learn CSS BOX MODEL.

What is a BOX MODEL?

The CSS box model as a whole applies to block boxes and defines how the different parts of a box — margin, border, padding, and content — work together to create a box that you can see on a page. Inline boxes use just some of the behavior defined in the box model. - mdn web docs

The BOX MODEL consists of the content, padding, border and margin.

Parts of a box

Making up a block box in CSS we have this:

• Content box: In this box your actual content is displayed; you can alter this using properties like height and width.

• Padding box: The padding is the area around the content as white space; you can alter it using padding and related properties. Basically padding is creates a space inside an element.

• Border box: The border box wraps around padding box if any otherwise on the content box; size it using border and related properties.

• Margin box: The margin is the outermost layer around the content, padding, and border as white space between this box and other elements; you can size it using margin and related properties.

The standard CSS BOX MODEL

In the standard box model, if you set height and width property value on a box, these values defines the height and width of the content box. Any padding and borders are then added to get the actual size of the box.

Note: However, the margin takes space on the page it is not counted towards the size of the box.

If we assume that we have the following box with some CSS properties:

.box {
  width: 300px;
  height: 200px;
  margin: 25px;
  padding: 10px;
  border: 5px solid magenta;
}

The actual size of the box will be width (horizontal)(300 + 10 + 10 + 5 + 5) and height (vertical)(200 + 10 + 10 + 5 + 5).

The alternate CSS BOX MODEL

In the alternate box model, the size is of the box is just the simple width and height of the box.

To apply the alternate box model, we use box-sizing property on it.

.alternate {
  box-sizing: border-box;
}

If we assume that we have the following box with some CSS properties:

.box {
  width: 300px;
  height: 200px;
  margin: 25px;
  padding: 10px;
  border: 5px solid magenta;
}

The actual size of the box will be width (horizontal)(300) and height (vertical)(200).

The alternate box model is popular among developers and here is how you can apply to the elements:

html {
  box-sizing: border-box;
}

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

Play with CSS BOX MODEL

Ignore the boilerplate, I create two divs with class name box. I also add one more class alternate to the second div. Now both the divs will have same properties except the alternate class.

The class box has following CSS properties:

.box {
  width: 200px;
  height: 150px;
  margin: 10px;
  padding: 25px;
  border: 5px solid magenta;
}

The class alternate has following CSS properties:

.alternate {
  box-sizing: border-box;
}

Conclusion

That's it for BOX MODEL; As everything on web is a box it is very important to learn the fundamentals of CSS. Learning box modeling enables you to manipulate and structure elements on the page.

Thanks for this reading!! If you find this helpful; drop your reactions and share this piece with others.

You can also stay connected with me by following me here and on X, LinkedIn.