To a web browser, page elements represent small containers or blocks. Such blocks can have different content – text, images, lists, tables and other elements. The inner elements of the blocks themselves act as blocks.
Let the element be located in some external container. It could be a body element, a div, and so on. It is separated from other elements by some distance – the outer margin, which is described by the CSS margin property . That is, the margin property defines the distance from the border of the current element to other neighboring elements or to the borders of the outer container.
Next comes the element itself. And at the beginning comes its border, which in CSS is described by the border property .
After the border comes padding, which in CSS is described by the padding property . The padding defines the distance from the border of an element to the inner content.
Next comes the inner content, which also implements the same box model and can also consist of other elements that have padding, padding, and a border.
For example, let’s define the following web page:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Block Model in CSS3</title>
<style>
div {
margin: 15px;
padding: 11px;
border: 3px solid red;
}
</style>
</head>
<body>
<div>
<p>First block</p>
</div>
<div>
<p>Second block</p>
</div>
</body>
</html>
After running the web page in the browser, we can view the box model of specific elements. To do this, right-click on the desired element and select the item from the context menu that opens, which allows you to view the source code of the element. For different browsers, this item may be called differently. For example in Google Chrome this View code :
In Mozilla Firefox, this item is called Inspect Element .
And by selecting this item, the browser will open a panel where the element code, its styles and block model will be shown:
In this model, we can see how the padding of an element, its border are set, see the padding from other elements and, if necessary, dynamically change the values of their styles.
If we don’t explicitly set the values for the margin, padding, and border properties, then the browser uses the preset values.