Understanding the Box Model is fundamental to using CSS. All elements in HTML can be considered a box, whether it’s a <div>, <p> or a <img>. Boxes have consistent properties that while at first aren’t visible can be adjusted.
Below is a diagram of the CSS box model:
Content: This is where text and images appear.
Padding: The area around the content. It inherits the same background colour of the content area.
Border: Surrounds the outer edge of any padding and content. It can be customised to have different styles (dotted, dashed etc), widths and colours.
Margin: Area around the outside of the element’s border. It is always transparent a therefore can’t be coloured.
An example of the CSS code needed:
border: 5px solid black;