CSS Box Model

As we all know that all HTML elements can be grouped into boxes each having margin, border, padding, and content. Margin is the area outside the border whereas padding is the area around the content both being transparent in nature. Border goes around padding and content.

Example,

div{
width: 100px;
border: 10px solid black;
padding: 5px;
margin: 30 px;
}

 

Padding can be specified for four different values for each side of a box-like padding-top, padding-bottom, padding-left, padding-right.

It is important to note that if width is specified for a box, padding is added onto the width of the box. Also, we can specify values for each side of a box using margin-top, margin-bottom, margin-left and margin-right.

If we want to center a box on the page, we can set the left and right margin to auto.

 

Talking about the border, we have many different properties of it as well.

Border-width: it controls the width of the border. Borders can have values of thin, medium or thick and is usually specified in pixels. We can control the individual size of borders using border-top-width, border-bottom-width, border-left-width and border-right-width.

 

Border-style: the style of the border can be changed by using this property. It can be set to solid, dotted, dashed etc.

 

Border-color: this property can also have values of border-top-color, border-bottom-color, border-left-color and border-right-color.

 

Border-radius: if want to change how the border looks like we can do so by border-radius property such as we can make the corners of the border round or make the border circular.

 

Box shadow property: This property allows us to add a drop shadow around any box.