CSS Box Model

CSS Tutorial

CSS Advanced

CSS Responsive

CSS Grid

In CSS, the term “box model” defines the design and layout.

The CSS box model is a box that wraps around every HTML element. It includes the margins, borders, padding, and the actual content. The image below defines the box model

Explanation of the box model:

Content – The content of the box in which all the text and images are displayed.
Padding – Clears an area around the content. The padding is transparent
Border – A border that wraps around the padding and content
Margin – Clears an area that is outside the border. The margin is transparent.

The box model adds a border around elements, and to specify the space between elements.

HTML

				
					<div class="boxmodel">
<p>The CSS box model is essentially a box that wraps around every HTML element. It consists of: borders, padding, margins, and the actual content.</p>
<p>This is box model</p>.</div>

CSS

				
					.boxmodel {
  background-color: lightgrey;
  width: 300px;
  border: 15px solid grey;
  padding: 10px;
}

Output

The CSS box model is essentially a box that wraps around every HTML element. It consists of: borders, padding, margins, and the actual content.

This is box model