CSS: Padding and Margin

css-box-model

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.

Advertisements

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 )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s