CSS Box model: Content, Padding, Border, Margin

Taimoor Sattar author Posted on

Box model in CSS in an important concept. Most of the time you will be using this concept for website development. The CSS box model is a box that wraps around the HTML element. Box model describes the size of each such block and its content through styling command. CSS box model consists of 4 main terms: Content, Padding, Border, Margin. The 4 terms enter here is written in sequential order. Content describes the content(or image) Padding describes clearing area around the content. Border refers to as the boundary wall around the padding. Margin define clearing area around the border area.

Where it is useful?

In order the design a good design, we maintain a gap between different elements. SO that user can easily visualize the webpage clearly. We can also specify the width and height of the HTML element.

This is the BOX 1
This is the BOX 2
[formatc lang="css"].boxmodel-1{ text-align: center; font-style: bold; color: white; background-color: red; padding: 5px 8px; border: 5px solid black; margin: 20px 20px; } .boxmodel-2{ text-align: center; font-style: bold; color: white; background-color: blue; padding: 8px 12px; border: 5px dotted black; margin: 20px 20px; }[/formatc]

Above is the example, red and blue area around the content is padding. The border is the black solid and dotted line in BOX 1 and 2 respectively. The GAP between BOX1 and BOX2 is the margin or the clearing area around the BOX is the margin. Moreover, you can either specify the margin, padding, border differently in the top, bottom, left and right. This is How you assign properties to only the top area: [formatc lang="css"]margin-top: 50px; padding-top: 50px; border-top: 5px solid black;[/formatc]

This is the BOX top
This is How you assign properties to only the bottom area: [formatc lang="css"]margin-bottom: 50px; padding-bottom: 50px; border-bottom: 5px solid black;[/formatc]
This is the BOX bottom
This is How you assign properties to only the left area: [formatc lang="css"]margin-left: 50px; padding-left: 50px; border-left: 5px solid black;[/formatc]
This is the BOX left
This is How you assign properties to only the right area: [formatc lang="css"]margin-right: 50px; padding-right: 50px; border-right: 5px solid black;[/formatc]
This is the BOX right