What is box model in CSS?
- In CSS, Box Model is like a box that wraps around every HTML element.
- A box model contains content, padding, border and margin.
Understanding Box Model
i) content: Content is the actual content includes: text, and images.
ii) padding- It is used to create the space around the content.
iii) border- It is used to create the border around the content.
iv) margin- Margin is used to create space around the content border.
Now let's see how the actual box model looks like
.png)
Code Described in the video
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Box model in CSS</title>
<style>
.container {
border: 2px solid red;
/* Padding in CSS */
/* padding: 20px;
padding-top: 40px;
padding-bottom: 20px;
padding-right: 20px;
padding-left: 30px; */
/* Margin in CSS */
/* margin: 20px;
margin-top: 20px;
margin-left: 30px;
margin-right: 50px;
margin-bottom: 10px; */
/* Shorthand */
/* padding: 20px 40px; */
/* margin: 20px 40px; */
padding: 40px 20px 20px 30px;
margin: 40px 20px 20px 30px;
/* Utility */
border-radius: 15px;
width: 300px;
height: 300px;
box-sizing: border-box;
}
</style>
</head>
<body>
<div class="container">
<h1> This is a heading </h1>
<p> Lorem ipsum dolor sit amet consectetur, adipisicing elit. Repudiandae, expedita! Lorem ipsum dolor sit amet
consectetur adipisicing elit. Facere sit dicta ut? Voluptatibus quaerat illum recusandae libero ipsum vitae
repellat. </p>
</div>
<div class="container">
<h1> This is a heading </h1>
<p> Lorem ipsum dolor sit amet consectetur, adipisicing elit. Repudiandae, expedita! Lorem ipsum dolor sit amet
consectetur adipisicing elit. Facere sit dicta ut? Voluptatibus quaerat illum recusandae libero ipsum vitae
repellat. </p>
</div>
<div class="container">
<h1> This is a heading </h1>
<p> Lorem ipsum dolor sit amet consectetur, adipisicing elit. Repudiandae, expedita! Lorem ipsum dolor sit amet
consectetur adipisicing elit. Facere sit dicta ut? Voluptatibus quaerat illum recusandae libero ipsum vitae
repellat. </p>
</div>
</body>
</html>
