Padding & Margin

Padding and Margin are two Cascading Style Sheet properties that are used to create spacing. To understand both properties, you must look at the element you are wanting to space as a box. When you want to create space on the outside of the box and parent/sibling elements, you use margin. When you want to put space on the inside of the box, between the border and child elements: you use padding.

Margin is also effective at centering objects. Various browsers do not support the same properties the exact same way. For example, Internet Explorer does not center wrapping elements the same way Firefox or Google Chrome does. To center a wrapping div, you must use the CSS property: "margin: 0px auto;" When using two values for a margin property, the first value represents the top and bottom margin, while the second value represents the left and right margins. Using the value "auto" is possible, but only when the parent's respective width or height values are set. In this case, the respective value is set by the browser's native CSS values. However, in this case using "auto" for the top and bottom would not work because the body's height property is not set.

Spacing is important because it provides clarity to your page, and allows you to work effectively to put content in the place that your viewers most likely read.

-Cole Turner.