What is CSS Box Model and How it Works?

CSS Box Model is the identification which means how a box and its attributes are related to each other. The CSS Box Model term is used to make a sense about CSS layouts. This is very important for developers and developers should have the crystal clear knowledge of CSS Box model.

CSS Box Model applied to all HTML elements because any HTML element can be considered as a box. Let’s think – you have an HTML element with the 200px width and 150px height so that CSS Box Model tells the browser to create a rectangle box with 200 pixels wide and 150 pixels tall. CSS Box Model is not only limited to height and width, you can also add padding, margin, border etc.

CSS Box Model

The boundary of these four areas are called EDGE and it defines a box.

Content Box

The most inner rectangle is called content box. Height and width of this content box depend on the element’s content like image, text or any other pieces of stuff.

Padding Box

The upper-level rectangular box is called padding box. The CSS padding property is actually defined by this box. Padding edge will be equal to the content edge if no padding is defined.

Border Box

Another rectangular box that has a position on padding box is called border box. Simply it defines the border property and its edge will be equal to padding box edge of no border is specified.

Example of CSS Box Model

For this style, below CSS Box Model is created in google chrome. Here is the screenshot.

CSS Box Model

Nothing here to discuss, you just understand the code and image. Simply we understand that this box model has a 500px width and 300px height with a 20px margin, 30px padding and 10px border. We define our content height and width here, but if we don’t define it, the default height and width of its content will be applied to the content box. If there is no content of this element, the light blue box should be 0 x 0.

CSS Property (box-sizing)

CSS allows us to change the default box model with the box-sizing property. The box-sizing property defines what type of sizing properties like height and width are included. The default value of this property is content-box.


box-sizing: content-box | padding-box | border-box

CSS Box Model


This is the common box model. Sizing properties are only included in the content. Not for padding and border.


The another box model. Sizing properties are only included in the content and padding also. Not the border.


Another box model. Sizing properties are included in the content, padding as well as the border.

Follow the given example to get it in detail with a visual view.



See the Pen What is CSS Box Model and How it Works? by Pavel (@bdpavel) on CodePen.0

That’s all today. Hope will meet you soon with new important topics.