The box model describes how elements are laid out in HTML including the content, padding, border, and margin. The content contains the text or images, padding provides space between the content and border, the border can be styled with CSS, and margin spaces elements apart from each other on the page. Padding and margin are used together to control spacing of elements.

1. The Box Model

2. The Box Model
● Content
● Padding
● Border
● Margin
Image from
w3schools.com

3. Content
Any element on a page such as:
● Text
● An image
● A header
● A footer

4. Padding
This is the space between the content and the border
which goes around it

5. Border
Every element has a border whether or not it’s visible.
Css gives you a lot of control over the appearance and size
of the border

6. Margin
The space which spaces the content and it’s border from
other elements on the page.

7. Margin and Padding
The margin and padding properties can be used together to
space out various elements on the page.