CSS Box model:-

CSS box model is a rectangular space around a HTML element which defines border, padding and margin.

Border: - This defines the maximum area in which the element will be contained. We can make the border visible, invisible, define height and width etc.

Padding: - This defines the spacing between border and element.

Margin: - This defines the spacing between border and any neighboring elements.

For instance below is a simple CSS code which defines a box with border , padding and margin values.

.box {
    width: 200px;
    border: 10px solid #99c;
    padding: 20px;
    margin: 50px;
}

Now if we apply the above CSS to a DIV tag as shown in the below code , your output would be as shown in the figure below. I have created two test “Some text” and “Some other text” so that we can see how margin property functions.

<div align="middle" class="box">
Some text
</div>
Some other text