Hackforge Academy

Explanation

The CSS Box Model defines how every HTML element is displayed using content, padding, border, and margin.

Code:

.box {
  width: 200px;
  height: 100px;
  border: 2px solid black;
}

Explanation

The content area contains the actual text, image, or other content displayed inside an element.

Code:

.content {
  width: 300px;
  height: 150px;
}

Explanation

Padding creates space between the content and the border, making the content appear less crowded.

Code:

.box {
  padding: 20px;
}

Explanation

The border surrounds the padding and content, while the margin creates space outside the element from neighboring elements.

Code:

.box {
  border: 2px solid blue;
  margin: 30px;
}

Explanation

The box-sizing property controls how the total width and height of an element are calculated. border-box includes padding and border within the specified dimensions.

Code:

.box {
  width: 250px;
  padding: 20px;
  border: 5px solid black;
  box-sizing: border-box;
}