Box Model in CSS

Box Model in CSS

The Box Model is a fundamental concept in CSS that defines how HTML elements are rendered on the page. Each HTML element is considered as a rectangular box that can be manipulated through CSS properties. These properties include the box's width and height, margins, padding, and border.

The box itself is made up of four parts: the content, the padding, the border, and the margin. The content is the area inside the box that contains text, images, and other HTML elements. The padding is the area between the content and the border, which can be filled with a background color or image. The border is the line that surrounds the box, which can be configured with different styles, colors and widths. And the margin is the area outside the border, which can be used to create spacing between boxes.

To better understand the Box Model, let's take a look at some CSS properties that affect each of the box's parts:

Width and height

The width property defines the width of the box, while the height property defines the height. These properties can be defined in pixels, in, percentage or other units. For example:

.box {
  width: 200px;
  height: 100px;
}

In this example, the box will have a width of 200 pixels and a height of 100 pixels.

Filling

The padding property defines the padding of the box, that is, the distance between the content and the border. Padding can be set in pixels, in, percentage, or other units. For example:

.box {
  padding: 20px;
}

In this example, the box will have a padding of 20 pixels in all directions (top, right, bottom, and left).

Border

The border property defines the border of the box. It can be configured with different styles, colors and widths. For example:

.box {
  border: 2px solid black;
}

In this example, the box will have a solid border that is 2 pixels wide and black in color.

Margin

The margin property defines the margin of the box, that is, the distance between the border of the box and other boxes on the page. The margin can be set in pixels, in, percentage or other units. For example:

.box {
  margin: 20px;
}

In this example, the box will have a margin of 20 pixels in all directions (top, right, bottom, and left).

In summary, the Box Model is a fundamental concept in CSS that allows web developers to control the layout and design of HTML elements on the page. By understanding how each part of the box is affected by CSS properties, complex and visually appealing layouts can be created.

Next page of the Free Ebook:

7Positioning in CSS

3 minutes