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.
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]