CSS Box Model:-

All the HTML elements can be considered as a box. 

The CSS Box Model:-

The term box model is used in CSS when we talk about design and web website layout.

The CSS box model is a term that wraps around all the HTML elements. It contains borders, margins, padding, and the actual content.

The explanation of the different parts:

  • Content - Content is the place where all the data are shown to us on the website like images, text and etc.
  • Padding - Padding is placed around the content that shows us transparent.
  • Margin - Margin is the place around the border that shows us transparent.
  • Border - A border covers the text around the padding and margin.

The box model allows us to add a border around the HTML element, and define space as your desire between the HTML element.



<!DOCTYPE html>

<html>

<head>

<style>

div {border-color: lightgrey;

width: 300px;

border: 10px solid red;

padding: 50px;

margin: 20px;

}

</style>

</head>

<body>

<h1> Demonstrating The Box Model</h1>

<p> CSS box model is a model that wraps around an HTML element. It consists of the border, padding, margin, and the actual content of the HTML.</p>

<div>This is the actual content of the box in which we set the border color of light grey, set the width of 300px, set the border of 10px solid red, set the padding of 50px, and also set the margin of 20px. </div>

</body>

</html>

Try this code for a better experience 



Width and Height of an Element:-

The width and height of the element should be correct in order in the browser. First, you have to need about the box model and how it works.

NOTE:- When you are setting the height and width of an HTML element using CSS, you just set the height and width of the content area of the HTML, first calculate the full size of the element that you want to set the width and height, you must add padding, margin and the border of the content.



<!DOCTYPE html>

<html>

<head>

<style>

div {border: 5px solid green;

width: 320px;

padding: 10px;

margin: 0;

} 

</style>

</head>

<body>

<h1> Calculate The Total width</h1>

<img scr="/* here paste your any image address from your browser*/"  width="350" height="263" >

<div> The above picture has 350px widths and the total width of this element is also 350px.</div>

</body>

</html>

Try this code for a better experience 



Here is the calculation of the total width:

320px (width)
+ 20px (left padding + right padding)
+ 10px (left border + right border)
+ 0px (left margin + right margin)
= 350px

The total width of the element calculated should be like this:

Width of the total element = width + left padding + right padding + left border + right border + left margin + right margin

The total height of the element calculated should be like this:

Height of the total element = height + top padding + bottom padding + top border + bottom border + top margin + bottom margin