Understanding the “box model” is central to all CSS-based layouts.
The main principle of the box model is that everything is contained within a box.
The box model is made up of six basic properties:
- Content: The text, images, multimedia, etc. included inside of the box.
- Width & Height: The contained element’s width and height in pixels.
- Padding: The space between the element’s border and the content. This property does not allow negative values and does not affect the distance of elements from one another. When setting this property you can specify the same padding for all four sides of the element or set different padding properties for the top, bottom, left and right sides of the element.
- Border: The line around the padding.
- Margin: The space between the content and the box’s edge. When setting this property you can specify negative values and also the same margin for all four sides of the element or different margin properties for the top, bottom, left and right sides.
- Background: The color or image that makes up the background of the box.