Box Model

The Box Model is a CSS structure that considers each element on a web page as a box.

This box consists of four parts: 'content', 'padding', 'border', and 'margin'.

Let's compare these parts of the box model to a box of chocolates. 🍫

• Content: The chocolates inside the box (the area where the actual content is located)

• Padding: The space between the chocolates and the edges of the box (the space between the content and the border)

• Border: The box itself (the border of the box)

• Margin: The space between the chocolate box and other chocolate boxes (the space between other elements)

Let's take a closer look at each component of the box model.

Content is the part that is actually visible on the web page, such as text or images.

Copy
<!-- A box containing the text "content area" -->
<div class="box">content area</div>

Copy
.box {
  width: 200px; /* Setting the width of the box to 200px */
  height: 100px; /* Setting the height of the box to 100px */
}

Padding refers to the space between the content and the border.

Copy
.box {
  padding: 20px; /* Adding 20px of padding on all sides (top, right, bottom, left) */
}

The border is the boundary line of the box. You can specify the thickness, style, and color of the border using CSS.

Copy
.box {
  border: 5px solid black; /* A black border of 5px thickness with a solid style */
}

Margin refers to the space outside the border, creating separation between this element and others.

Copy
.box {
  margin: 15px; /* Adding 15px of margin around the box */
}

Copy
<div class="box">Hello!</div>

Copy
.box {
  width: 100px;
  height: 100px;
  padding: 20px;
  border: 5px solid blue;
  margin: 15px;
  background-color: yellow;
}

Following the CSS code, the div element with the class .box has the following characteristics:

• Content saying "Hello!"

• 20px of padding between the content and the border

• A border with 5px thickness in blue color

• 15px of margin outside the border

Type in the highlighted parts of the code for emphasis.