CSS Box Model

The CSS Box Model is a fundamental concept in web design that describes how the space around and within an HTML element is structured and displayed. The box model consists of four main components: content, padding, border, and margin. Understanding how these components interact with each other can help you create more visually appealing and well-organized web layouts.

Content

The content of an HTML element is the actual text, images, or other media that is contained within the element. This content is surrounded by the padding, border, and margin of the element.

Padding

The padding of an element is the space between the content and the border of the element. Padding can be added to the top, right, bottom, and left sides of the element using the padding property in CSS.

.example {
  padding: 10px;
}

Border

The border of an element is the line that surrounds the padding and content of the element. Borders can have different styles, colors, and widths, which can be defined using the border property in CSS.

.example {
  border: 1px solid black;
}

Margin

The margin of an element is the space outside of the border. Margins are used to create space between elements on a webpage. Margins can be added to the top, right, bottom, and left sides of an element using the margin property in CSS.

.example {
  margin: 10px;
}

Summary