The CSS Box Model:-

All HTML elements can be considering is a boxes. In CSS, the term "box model" is using to design and layout. It using of: margins, borders, padding, and the actual content.

Content - The content of the box, where text and images inside the box

Padding - Clears an area around the content.

Border is that is goes around the padding and contents

Margin - Clears an area outside the border.

<!DOCTYPE html>
<html>
<head>
<style>
div {
  background-color: blue;
  width: 300px;
  border: 15px solid yellow;
  padding: 50px;
  margin: 20px;
}
</style>
</head>
<body>

<h2>Demonstrating the Box Model</h2>

<p>this is code family</p>

<div>welcome to code family</div>

</body>
</html>

Width and Height of an Elements in css:-

<!DOCTYPE html>
<html>
<head>
<style>
div {
  width: 320px;
  padding: 10px;
  border: 5px solid gray;
  margin: 0;
}
</style>
</head>
<body>

<h2> total width and height in code family:</h2>

<img src="https://img.icons8.com/dusk/256/000000/christmas-tree.png" width="auto" height="263" alt="Klematis">
<div>code family</div>

</body>
</html>

The CSS Box Model

The CSS Box Model:-

Width and Height of an Elements in css:-

More Topics