What is CSS Box Model
HTML elements is said to be considered as boxes. In css, “box model” term is used when talking about layout and design.
The CSS box model is said to be essentially a box which wraps around each and every HTML element. CSS Box Model consists of marigns, padding, borders and actual content. Image below illustrates the box model:
Explanation of the different parts:
- Content– Content of the box, where image and text appear
- Padding– This clears around the content. Padding is said to be transparent.
- Border– Border which goes around the padding and content
- Margin– This clears an area outside the border. Margin is transparent
The box model will allow us to add a border around elements which has to define space between elements.
border: 25px solid green;