Know more about CSS Box Model & its implementation

Know more about CSS Box Model & its implementation

CSS Box Model is a box around the HTML elements. This area is divided into 3 parts Padding, Border & Margin. Let us discuss about a HTML div with the content “This is a sample text.”. As shown in below figure, Padding is the nearest area to the div contents before border. Border is the boundary for your html elements. About margin it is area after border.

Padding in CSS Box Model

Padding has its 4 properties padding-top, padding-right, padding-bottom & padding-left. This can be used using following CSS syntax.

.box-model {
padding-top: 100px;
padding-right: 200px;
padding-bottom: 300px;
padding-left: 400px;
}

By declaring only padding it apply the same value for each of the above 4 properties.

.box-model {
padding: 100px;
}

You can also declare padding using the following CSS syntax. Here the sequence is top, right, bottom & left. I mean clock-wise.

.box-model { Padding: 100px 200px 300px 400px; }

Border in CSS Box Model

As I discussed above border is the boundary line to your HTML elements. It has several properties. With the advanced version of CSS3 there are some additional properties to border. Here with I am discussing the most common used border properties from CSS & CSS3.

Border Style

Border Style comes with none, dotted, dashed, solid, double, groove, ridge & outset values. The default value for border style is none. Commonly used border styles are solid, dotted & double. We can declare border style using the following CSS syntax.

.border-style {
    border-style: solid;
}

Border-width

It provides width to the border of HTML elements. The unit of border-width is pixel. Border width has 3 per-defined properties. Thin, medium & thick. We can declare CSS border width using the following Syntax.

.border-style {
    border-style: solid;
    border-width: thin;
}

or

.border-style {
    border-style: solid;
    border-width: 2px;
}

Remember if you only apply border-width to your class it will not show you the border. Because by default border-style is none.

Border Color

This property of border helps to update the border color. The following CSS syntax we used to achieve border colors.

.border-style {
    border-style: solid;
    border-width: 2px;
    border-color: red;
}

In CSS3 the additional border properties are border-radius, box-shadow & border-image. These properties works for IE 9 & the higher version of IE 9.

Margin in CSS Box Model

Like the padding margin has its 4 properties. Margin-top, margin-right, margin-bottom & margin-left. This can be used using the following CSS syntax.

.box-model {
margin-top: 100px;
margin-right: 200px;
margin-bottom: 300px;
margin-left: 400px;
}

By declaring only margin it apply the same value for each of the above 4 properties.

.box-model {
margin: 100px;
}

You can also declare margin using the following CSS syntax. Here the sequence is top, right, bottom & left. I mean clock-wise.

.box-model { margin: 100px 200px 300px 400px; }