CSS Box Model

The CSS Box Model is one of the most fundamental concepts in web design. It defines how every HTML element is built: content, padding, border, and margin together form the box around the element.

The Elements of the Box Model

The Box Model consists of four main parts: content, padding, border, and margin. Together these determine the total size and placement of the element.

In the following example, a <div> element is displayed with padding, border, and margin settings:

Visual Examples of the Box Model

The following examples illustrate how padding, border, and margin values change the appearance of an element.

Using box-sizing

By default, width and height only apply to the content, and padding and border are added. With the <box-sizing: border-box;> setting, padding and border are included within the defined dimensions.

div {
  width: 200px;
  padding: 20px;
  padding: 5px solid black;
  margin: 10px;
}

Tips for Using the Box Model

Proper use of the Box Model is essential for precise layout. The following tips help:

• Use the <box-sizing: border-box;> setting for more predictable sizing.
• Always leave enough margin between elements to improve readability.
• Experiment with different padding and border values for harmonious design.