What is the box model?
The box model in CSS is a box that wraps around every HTML element because all HTML elements contain this invisible box (which can be made visible when styling).
What are its properties?
It has four properties. Starting from the inside out, it contains the content (text and images), padding (the space between the content and the border), border (which you can color and style), and margin (the space outside of the box). We use the box model to position HTML elements on our page.
Where can we find it?
We can find the box model on any website by right clicking a page and selecting ‘inspect’ from out right click menu. Hover over your HTML elements the HTML elements displayed to see how the box model is used in each.
Reiteration of Properties
To reiterate, the four properties of the box model are:
- Content: Text or images
- Padding: The transparent space between to content and the border
- Border: A perimeter that houses the padding and the content
- Margin: The transparent space outside of the box that pushing other elements away from it
