Become Wordpress Professional - Your Ultimate Wordpress Guide

Friday, 15 March 2013

Understanding Concepts of Margin and Padding in CSS

After our overview of Box model, i wanna take a moment to familiarize you with the individual properties of box model and I wanna start with margin and padding.

What is Padding?

"Padding is the space inside of an elements that holds the content away from it's edge."

Padding Syntax

You can specify padding in several ways First you can define padding individually for each side of an element. Keep in mind however, setting padding in only one direction is not the same as setting padding to 0 in other directions. Any existing padding on other sides is still going to apply.
padding-top: 10px;
padding-right: 20px;
padding-bottom: 15px;
padding-left: 10px;

You can also use shorthand notation when defining padding. There are 4 variations on padding shorthand.
First you can define four values, separated by wide spaces. So now these values are gonna apply in order to the top, right, bottom and left side respectively
padding: 10px 20px 15px 10px;

Now if you use three values. The first value will be applied to the top, the second value for the left and right sides and the last value will be applied to the bottom.
padding: 10px 20px 15px;

If you only use two values. The first value applies to the top and the bottom, well the second value will apply to both left and right sides.
padding: 10px 20px;

Finally if you simply use single value, that value is gonna be used for all sides equally.
padding: 10px;

Padding Consideration

The rules for padding are actually fairly straight forward and most elements starts with no padding at all. However, when width values are set on an element is well. There are couple of thing to keep an eye on. Now by default most element that are considered block level element like paragraphs will go head and expand to fit to the width of their parents.



If you don't define the width of those elements, padding will be added to the inside of the element, which cause the content area shrink and sometimes result in element actually getting taller.



If on the other hand you specify width, say 100%. The padding will then result in element actually becoming wider then it's parent element. As the padding is actually added to the outside of an element width



When defining an element width it's crucial that you factor the element padding into the equation.

Padding Usage

Most designer use padding to keep the content of a box away from it's edge. This can be used to create visual boxes like "pull quotes" out of a single element without using graphics or background images.



Padding can also be used to move the content of the element away from a background image to give the appearance of custom bullets.



What is Margin?

"Margin represents the space between elements and are applied out side of the element edge."
Well it's not factored into the total width of an element but It does effect the amount of the space that an element takes up on the page and it's critical to achieve proper spacing between elements. Unlike padding many element do have a default margin that you need to account for when structuring layouts. Later on, we'r gonna discuss what a CSS reset is, how they affect margins and rational for using them.

Margin Syntax

Margin also use same syntax as padding, so You can also specify margin in several ways.
margin-top: 10px;
margin-right: 20px;
margin-bottom: 15px;
margin-left: 10px;

You can also use shorthand notation when defining margins. There are 4 variations on margin shorthand.
First you can define four values, separated by wide spaces. So now these values are gonna apply in order to the top, right, bottom and left side respectively
margin: 10px 20px 15px 10px;

Now if you use three values. The first value will be applied to the top, the second value for the left and right sides and the last value will be applied to the bottom.
margin: 10px 20px 15px;

If you only use two values. The first value applies to the top and the bottom, well the second value will apply to both left and right sides.
margin: 10px 20px;

Finally if you simply use single value, that value is gonna be used for all sides equally.
margin: 10px;
For the most part margins are pretty straight forward but there is one aspect of margins that tends to tripped up, even the most experience of designers.

Vertical Margin Collapse

Unlike horizontal margins, Vertical margins collapse. That means, that if you have two elements stacked one on top of another, only one of the element's margins are applied.



Take this example, if you have heading ( h1 ) with the bottom margin of 16px and paragraph with top margin of 16px. There would be only 16px worth of space between them and not 32px.



This prevents headings and paragraphs from having double spaces between the two of them. If the values are not the same then higher of the two values are going to be used. There are lot more to margins collapses so as you learn CSS, pay particular attention to when vertical margins collapse, how they collapse? why they collapse and how you can triggered or prevent it based on your needs.


1 comment:

  1. Thanks very much - this cleared up a bunch of questions for me!

    ReplyDelete

Please Avoid Spamming. Comments will be moderated before they are published.