CSS Beginner tutorial 4 : Margins and Padding

Margin and padding are the two most commonly used properties for spacing-out elements. A margin is the space outside of the element, whereas padding is the space inside the element.
For example, we have following CSS code for h2 tag:

h2 {
margin: 8px;
padding: 10px;
}

<h2>This is secondary Heading.</h2>

Then text inside h2 tag will look like as follow. ( margin and padding are shown with different colors for better understanding, margin is in light and padding is in dark.)

margin and padding

The four sides of an element can also be set individually. Following properties you can use, to set the element side individually.

margin-top,  margin-right,  margin-bottom,  margin-left          ( For Margin )  

padding-top,  padding-right,  padding-bottom,  padding-left.   ( For Padding )

See Also