Ads

We help in wordpress site design and developmet, contact us by completing the form.

CSS Box model: Content, Padding, Border, Margin

Taimoor Sattar 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
.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;
}

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:

margin-top: 50px;
padding-top: 50px;
border-top: 5px solid black;

This is the BOX top

This is How you assign properties to only the bottom area:

margin-bottom: 50px;
padding-bottom: 50px;
border-bottom: 5px solid black;

This is the BOX bottom

This is How you assign properties to only the left area:

margin-left: 50px;
padding-left: 50px;
border-left: 5px solid black;

This is the BOX left

This is How you assign properties to only the right area:

margin-right: 50px;
padding-right: 50px;
border-right: 5px solid black;

This is the BOX right

Ads

We help in wordpress site design and developmet, contact us by completing the form.

From Our blogs

Leave a comment

Leave a Reply

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


Recent Comments
    No comments found.