Padding, Border and Margin properties from CSS Box Model

CSS Tricks with Examples
May 10, 2016
4 (1 votes)
Padding, Border and Margin properties from CSS Box Model
4 out of 5 based on 1 user ratings
Publish with us | Our Do-Follow links are lifelong

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

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

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

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; }

Refer CSS Box Model from w3schools

Tags:,