CSS: Padding and Margin


Padding is space given to the elements INSIDE the div.

1. You can add an equal amount of padding to the top, bottom, right and left sides like this:

padding: 20px;

2. You can just add a specific amount of padding to one side using one of these properties:

padding-top: 20px;
padding-bottom: 20px;
padding-left: 20px;
padding-right: 20px;

3. You can add padding on 3 sides but not on the 4th:

padding: 20px;
padding-bottom: none;

4. There is also this method to shorten the CSS code:

padding: 0 0; (combines top/bottom and left/right)
padding: 0 0 0 0; (clockwise: top, right, bottom, left)

Margin is space given to the OUTSIDE of the div.

margin: 20px;

The same property variations that apply to padding are used with margin.


Leave a Reply

Fill in your details below or click an icon to log in:

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