CSS Margin, Padding And Border Properties

Hi Friends
Today i am going to talk about the margin, padding and border. Where these properties used?, how to calculate margin and padding and why we use these properties. Margins and padding are essential for every web designer to understand it well. When you will style something with css there you will meet with these property so to now these property very clearly is important.Without knowing these properties well you can not code the layout properly.

Box Model:

Box model is used for understanding the concept of layout and using the margin, padding and border properties. Consider a box in which you add margin, padding and border how it looks like.

Margin:

The margin cover the outside area of an element. It has not background color it is transparent.

Margins can be change individually. If you want to change only one side margin you can use these properties. (margin-top, margin right, margin-bottom, margin-left).

Shorthand Margin :

You can you shorthand method to add the margin for all side at once.

Example 1:

margin: 20px;

for all four sides.

Example 2:

margin: 25px 15px 20 px 10px;

The first 25px is for the top margin, the second 15px is for the right margin, the third 20px is for bottom margin and the forth 10px is for the left margin.

Example 3:

margin: 20px 10px 5px;

The first 20px is for top-margin, the second 10px is for right and left margin and the last 5px is for bottom.

Example 4:

margin: 10px 5px;

The first 10px is for top and bottom margin and second 5px is for the right and left margin.

CSS Border:

With css  border property you can set up the border around an element. The border lie between the margin and padding of an element. You can set the width, border style and border color for the border by these properties(.border-width, border-style and border-color). You can set the border of all side individually (border-top, border-right, border-bottom, border-left).

Shorthand Border:

Yes you can use the short hand method for border.like this;

border: 3px solid blue;

In the above shorthand property 3px defines the width of border, solid defines the border-style and the final blue which defines the border color.

Padding:

Padding cover the space between the border and element or content. Padding is affected by background color. Padding can be changed individually if you want set the padding of one side you use these properties(padding-top, padding-right, padding-bottom, padding-left)

Shorthand Padding:

You can you shorthand method to add the Padding for all side at once.

Example 1:

padding: 20px;

for all four sides.

Example 2:

padding: 25px 15px 20 px 10px;

The first 25px is for the top padding, the second 15px is for the right padding, the third 20px is for bottom padding and the forth 10px is for the left padding.

Example 3:

padding: 20px 10px 5px;

The first 20px is for top-padding, the second 10px is for right and left padding and the last 5px is for bottom.

Example 4:

padding: 10px 5px;

The first 10px is for top and bottom padding and second 5px is for the right and left padding.

How To Calculate The Margin And Padding:

For width:

Consider box with the width of 360px , left-margin=10px and right-margin=10px and the left-padding=10px and right-padding=10px .

Formula for calculating width:

width of box + left-margin + right-margin + left-padding + right-padding = Total width of box

For Height:

Again consider box with the height of 200px , top-margin=10px and bottom-margin=10px and the top-padding=10px and bottom-padding=10px .

Formula for calculating Height:

height of box + top-margin + bottom-margin + top-padding + bottom-padding = Total height of box

Final words:

Now you have complete understanding of box model, margin, padding and border and how to use them.

keep practicing and don't forget to share our post with your friends.

Thanks For Reading