Box Model in CSS3

 Box Model in CSS3

 

The box model is used to describe the layout of an element in terms of its content, padding, border, and margin. CSS3 allows you to control each of these aspects independently, giving you greater control over the layout of your web pages.

html

<div class="box">This is a box</div>

css

.box {

  width: 200px;

  height: 100px;

  padding: 20px;

  border: 2px solid black;

  margin: 20px;

}

In this example, we have created a box element with a width of 200 pixels, a height of 100 pixels, 20 pixels of padding, a 2-pixel solid black border, and 20 pixels of margin on all sides.