There is more to an HTML element than only its basic content.
All HTML elements are essentially surrounded by a box, with the core content in the middle, surrounded by the padding, surrounded by the border, with the margin as the final outer layer.
This structure is called the CSS box model.
The padding, border, and margin can each be styled with CSS to change the design and placing of an HTML element on a website.
To understand what each aspect of the CSS box model is: Imagine you’ve painted a picture of a zebra on white paper.
The zebra would be your content.
The space between your zebra and the edges of the paper will be your padding.
The border would be the edges of your paper. You could leave it a simple paper border, cut it into shapes, or put it into a colored frame to change the overall presentation of your painting.
Then, imagine that you have painted many pictures of many zebras, and you’ve displayed them in a home gallery. The space between each painting would be the margins.
By changing the margins, border, padding, and content, you could change the entire look and feel of your gallery.
In this analogy, the gallery is your website, and each painting is an element of your website.
The box styles of each element will affect the look of your entire website, so you must pay special attention to them.