The CSS box model is essentially a box that wraps around HTML elements, and it consists of: margins, borders, padding, and the actual content.
The box model allows us to place a border around elements and space elements in relation to other elements.
Explanation of the four different parts:
Margin - Clears an area around the border. The margin does not have a background color, it is completely transparent
Border - A border that goes around the padding and content. The border is affected by the background color
Padding - Clears an area around the content. The padding is affected by the background color of the box
Content - The content of the box, where text and images appear
Example:
<html>
<head>
<style>
div
{
width:220px;
padding:10px;
border:5px solid gray;
margin:0px;
}
</style>
</head>
<body>
<img src="https://file-hosting.dashnexpages.net/sahrudayahelpinghands-students-org/water.gif" width="250" height="250" />
<div>It is Good Background Pic.</div>
</body>
</html>