All HTML elements are considered as boxes. In CSS, the term "box model" is used when talking about design and layout.
The CSS box model is essentially a box that wraps around HTML elements, and it consists of: margins, borders, padding, and the actual content.
The box model allows us to add a border around elements, and to define space between elements.
The image below illustrates the box model:
Explanation of the different parts:
- Content - The content of the box, where text, images and nested html elements appear
- Padding - Clears an area around the content. The padding is transparent
- Border - A border that goes around the padding and content
- Margin - Clears an area outside the border. The margin is transparent
consider this example
div {
width: 100px;
width: 100px;
padding: 10px;
border: 15px solid gray;
margin: 0;
}
border: 15px solid gray;
margin: 0;
}
total width of div = 100px + (10px left padding + 10px right padding) + (15px left border + 15px right border) = 150px
No comments:
Write comments