What is CSS Box Model

Posted by

What is CSS Box Model

HTML elements is said to be considered as boxes. In css, “box model” term is used when talking about layout and design.

The CSS box model is said to be essentially a box which wraps around each and every HTML element. CSS Box Model consists of marigns, padding, borders and actual content. Image below illustrates the box model:

Explanation of the different parts:

  • Content– Content of the box, where image and text appear
  • PaddingThis clears around the content. Padding is said to be transparent.
  • Border– Border which goes around the padding and content
  • Margin– This clears an area outside the border. Margin is transparent

The box model will allow us to add a border around elements which has to define space between elements.

div {
width: 300px;
border: 25px solid green;
padding: 25px;
margin: 25px;
}

Leave a Reply

Your email address will not be published. Required fields are marked *