What is the Box Model?

The every HTML element is represented as a rectangular box model, which consists of four areas and their names are explained below.

• The Content is the innermost part where the text or images appear.
• The Padding is a space between the content and the border.
• The Border is a edge surrounding the padding (and content).
• The Margin is a space outside the border, separating the element from others.

Visual Representation of the Box Model

CSS Box Model Visual

• The width is 200px, but the total size of the box includes padding, border, and margin.
• The Total width is 200px width + 20px padding + 5px border = 230px. Total width: 200px width + 20px padding + 5px border = 230px. The element will also have an additional 10px of margin outside of it.

Demonstrating a box model for understanding

Understanding CSS Padding and Margin

CSS Padding

• The Padding adds space inside the element, between the content and the border and you can control padding for each side individually or set the same padding for all sides.

• The Padding: 70px applies 70px of padding to all sides. You can also apply padding to individual sides using padding-top, padding-right, padding-bottom, and padding-left.

CSS Margins

• The Margins create space outside the element, pushing it away from other elements. Similar to padding, you can control margins for each side individually or set the same margin for all sides.

• The Margin: 70px applies a 70px margin around the element. Individual sides can be adjusted using margin-top, margin-right, etc.

CSS Borders and Border Radius

• The Borders are applied around the padding and content. You can control the width, style, and color of borders. The types of borders styles are as below.
• The Dotted border a dotted line border.
• The Dashed border a dashed line border.
• The Solid border a solid line border.

You can see the types of borders in the screenshot below.

• The borders add a visual edge around an element. You can control how thick and what style the border is.

CSS Border Radius

• The border-radius property makes the corners of an element rounded. You can apply different values to create more rounded or less rounded corners.

• A border-radius of 2px creates rounded corners. If you set the radius to 50%, it will create a circular shape.

CSS Box Sizing and Width/Height

Width and Height

• The width and height properties define the size of an element’s content area, excluding padding, border, and margin. You can set width and height using pixels (px), percentages (%), or other units.

• The content area of the will be 100px wide and 70px high, but the total size will include padding, borders, and margins.

CSS Box Sizing

• The width and height only apply to the content area. However, you can change this behavior using box-sizing: border-box . With border-box, padding and borders are included in the element’s total width and height.

• The Box-sizing: border-box; makes sure the total width is 300px, including padding and border, rather than adding padding and border to the width.