Box Model

 

Hello, everyone! Welcome to the Box Model lesson.

In this lesson, we will learn about the box model, which is the basic structure of all HTML elements.

What is the box model?

The box model is a visual representation of an HTML element. It divides the element into four parts:

• Content: The actual content of the element, such as text, images, or other HTML elements.
• Padding: The space between the content and the element’s border.
• Border: The border of the element.
• Margin: The space between the element and other elements on the page.

CSS Properties for the Box Model

There are many CSS properties that can be used to control the box model. Some of the most common CSS properties for the box model include:

• Width: Defines the width of the element.
• Height: Defines the height of the element.
• Padding: Defines the size of the element’s padding.
• Border-width: Defines the width of the element’s border.
• Border-style: Defines the style of the element’s border.
• Border-color: Defines the color of the element’s border.
• Margin: Defines the size of the element’s margin.

Examples

Let’s see some examples of how to use CSS properties to control the box model.

Example 1:

The following CSS code defines the width of the div element as 100px:

div {
  width: 100px;
}

Example 2:

The following CSS code defines the height of the div element as 100px:

div {
  height: 100px;
}

Example 3:

The following CSS code defines the padding of the div element as 10px:

div {
  padding: 10px;
}

Example 4:

The following CSS code defines the border width of the div element as 1px:

div {
  border-width: 1px;
}

Example 5:

The following CSS code defines the border style of the div element as solid:

div {
  border-style: solid;
}

Example 6:

The following CSS code defines the border color of the div element as blue:

div {
  border-color: blue;
}

Example 7:

The following CSS code defines the margin of the div element as 10px:

div {
  margin: 10px;
}

Note

It’s important to use CSS selectors to control which CSS rules are applied to which elements. This will help keep your CSS organized and easy to maintain.

Summary

In this lesson, we learned about the box model, which is the basic structure of all HTML elements. We saw the four parts of the box model and explored some of the CSS properties that can be used to control the box model.

In the next lesson, we will learn about element positioning.