CSS Margin and Padding [Designikx Tutorial]

Designikx Tutorial - https://designikx.wordpress.com
Today’s topic is CSS Box Model – Border, Margin and Padding

What is box model?

Margin, border, padding and contents of the element are together known as the The Box Model.
We don’t have to use all of these. But its good to keep box model in mind.
The graphical representation of The Box Model is as…

Box Model CSS - Designikx.wordpress.com

What is Margin?

Margin is the space by which we can keep a respective element away from its surrounding.
Lets say I have two DIVs and I want to keep second DIV away [Not Extreme] from the First One.
Then I will not give a float property right, Instead I will give Right Margin to first DIV or Left Margin to Second one.
We can give Margin to element by its all four side – Top, Right, Bottom & Left.
Negative values for Margin Properties are also allowed.Margin doesn’t have color/background color. It is completely transparent.

CSS Margin - designikx.wordpress.com

Ways to define a margin:

margin:top right bottom left;
margin: 5px 10px 15px 20px;
/* Set top margin 5px, right margin 10px, bottom margin 15px, left margin 20px */

margin: top (right & left) bottom;
margin: 5px 10px 15px;
/* Set top margin 5px, right and left margin 10px, bottom margin 15px */

margin: (top & bottom) (right & left);
margin: 5px 10px;
/* Set top & bottom margin 5px, right & left margin  10px */

/* Set same margin value for all sides */

What is Padding?

Padding is same as Margin. Instead of keeping space outside Padding keeps spacing inside the border.
Padding is the space by which we can keep space between element border and its content. Padding is completely transparent.

Designikx Tutorial - https://designikx.wordpress.com

Ways to define a padding:

padding:top right bottom left;
padding: 5px 10px 15px 20px;
/* Set top padding 5px, right padding 10px, bottom padding 15px, left padding 20px */

padding: top (right & left) bottom;
padding: 5px 10px 15px;
/* Set top padding 5px, right and left padding 10px, bottom padding 15px */

padding: (top & bottom) (right & left);
padding: 5px 10px;
/* Set top & bottom padding 5px, right & left padding  10px */

/* Set same padding value for all sides */

You can define both margin and padding in px, pt, em, % etc.

The “Border” section will be covered in next tutorial.


Nikhil U.
UI Designer


About Nikhil
Name : Nikhil Ughade UI Developer, Accidentally in design field, no turn back since then. Location : Pune (MH, INDIA) From : Amravati (MH,INDIA) College : VYWS's College Of Engg. Badnera, Amravati Hobby : Social Networking, Designing Web Sites, Photography, Reading Books. In Free time works for NGO.

Leave a Reply

Please log in using one of these methods to post your comment:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

%d bloggers like this: