CSS BOX Model

Hi,
    This is Sagar and in this blog we are going to learn how to create CSS BOX Model. 
    The CSS box model is a box that wraps around every HTML element. 
Basic CSS BOX Model consist some of the following properties:
  • Margin
  • Padding
  • Border
  • Width
  • Background Color
Structure of Box Model:

As you can see in above image these are four main components of CSS Box Model.
See the code below how CSS Box Model created:

<html>
<head>
<style>
div {
  background-color: white;
  width: 300px;
  border: 30px solid yellow;
  padding: 40px;
  margin: 20px;
}
</style>
</head>
<body>

<div><b>This is the content of the box.</b><br/> We have added:
<ul><li>40px padding</li><li>20px margin</li><li>30px yellow border.</li></ul> </div>
</body>
</html>

Output of above code:


Thanks 😊 for reading this blog...
Sagar Nipane
Email: spnipane@gmail.com

Comments

Post a Comment