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…
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.
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 */
margin:value;
margin:5px;
/* 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.
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 */
padding:value;
padding:5px;
/* 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.
———————————————-
Thanks,
Nikhil U.
UI Designer
Pune[MH,India]
Tags: CSS, css box model, css margin, css margin tutorial, css padding, css padding tutorial, CSS Tutorial, designikx, nikhil, nikhil ughade
Source : designikx[dot]wordpress[dot]com
0 comments:
Post a Comment