Cascading Style Sheets or CSS is the styling language used to structure, style the HTML components. Everything in CSS is a box. With the CSS box model, we can understand positioning elements using padding, border, and margin.
CSS box model has four main parts. They are:
- Content
- Padding
- Border
- Margin
Content
Content can be of any form, for example, text, numbers, images, etc. It is the inner content of the HTML tag. It can be defined by height and width property.
Padding
Padding is the area around the content and inside the border. It is used to add background to the element. It is usually used to space out the component from itself.
syntax:
padding: top-value right-value bottom-value left-value
example:
padding: 20px 25px 20px 25px;
Border
The border goes around the padding of the content. Inputs of the border are size, style, and color.
syntax:
border: size style color
example:
border: 15px solid black;
Margin
Margin is the spacing around the border. It is transparent and usually used to space two elements from each other. Margin collapses between two vertical elements next to each other and uses whichever is the largest.
syntax:
margin: top-value right-value bottom-value left-value
example:
margin: 25px 35px 25px 35px
Hence these are the basics of the CSS box model with syntax and examples for each property.