It consists of: margins, borders, padding, and the actual content. The image below illustrates the box model:
Explanation of the different parts:
Border - A border that goes around the padding and content
Margin - Clears an area outside the border. The margin is transparent
Content - The content of the box, where text and images appear
Padding - Clears an area around the content. The padding is transparent
Example:
<!DOCTYPE html>
<html>
<head>
<style>
div {
ackground-color: lightgrey;
width: 300px;
border: 15px solid green;
padding: 50px;
margin: 20px;
}
</style>
</head>
<body>
<h2>Demonstrating the Box Model</h2>
<p>The CSS box model is essentially a box that wraps around every HTML element. It consists of: borders, padding, margins, and the actual content.</p>
<div>
The CSS box model is the foundation of layout on the Web — each element is represented as a rectangular box, with the box's content, padding, border, and margin built up around one another like the layers of an onion. As a browser renders a web page layout, it works out what styles are applied to the content of each box.
</div>
</body>
</html>
CSS - Margins
margin-top
margin-right
margin-bottom
margin-left
All the margin,padding,height,width properties can have the following values:
