CSS Box Model (Incomplete)
Links: 116 CSS Index
Box Model¶
- HTML elements consist of border, padding, margins and content.
- All these affect the space an element takes up.
- Padding and border is inside of the element so adding it increases the size of the element.
- Margin is outside of the element and it used to create spacing between sibling elements.
If we set the box-sizing: border-box
then everything (padding, border) will add upto the specified width and height.
So if the component has a height and width of 100px then adding a padding of 10px will make its height 120px and width 120px without box-sizing: border-box
.
Last updated: 2023-03-17