What is box model?
- Box Model is just like a box that wraps around every HTML element.
- A box model contains content, padding, border, and margin.
Understanding Box Model
i) content - It is the actual content which includes: text, and images
ii) padding- Creates the space around the content.
iii) border- Border area where the content's border will be set.
iv) margin- Creates the space around the content border.
How the actual box model looks like
![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhQ3tGhbxPdru56xz4Uj6b_YNgz33NUfbTHeF4_OzfChYCjxgEzoU8Ali-bpQhBUYfoPslrC6PEv_r5safDVHstG2NWRRXNin8MmUm76ZE0NsmTi2pzZUMOiRzQThaF3V1KnK33k1whtM1RXQCYognNu72K35jaf1_6JjMzKXDvdbd59e6T7K5bK06B/s320/how%20box%20model%20looks%20(1).png)
Understanding With Example
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title> Box Model in CSS</title>
<style>
.myBox {
width: 200;
border: 4px solid skyblue;
padding: 20px;
margin: 20px;
}
</style>
</head>
<body>
<div class="myBox"> This is a Box </div>
</body>
</html>
Output:
![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhPb3nUzkssUiTsNl2WeU2yjVloJ3h2ie6_xoBsdZ28P0PY1yj0ZJSeY3WgfAd0IV_5X9XK08dPv7XuTbzUjJ0jsHFVx-Le_XHAbkIGZg0JuvZO6wJxxw80OrBbRPPOSokansT8fq7g4aetY_WBO0RAz5hdrAhqUBAyrXs3uxYmG6ZbUYvAKCXE74XK/w400-h100/Box%20Model%20in%20css.png)