CSS: margin and padding

margin is the space around elements (i.e. outside the border of an element).

padding is the space between the element border and the element content.

Visually, this helps:

Image illustrating the relationship between content, padding, borders, and margins.

The four numbers you may see after each of these start at the top and then go clock-wise. E.g. this:

margin:25px 50px 75px 100px;

means that the:

top margin is 25px

right margin is 50px

bottom margin is 75px

left margin is 100px

Note that the word “auto” is an instruction for the browser to calculate the margin.

The number of arguments to margin can vary from 1 to 4. Here’s what to do for the various cases:

One single value applies to all four sides.

Two values: apply first to top and bottom, the second to left and right.

Three values: apply first to top, second to left and right and third to bottom.

Four values apply to top, right, bottom and left in that order (clockwise).

More info here:

http://www.w3.org/TR/CSS2/box.html

and here:

https://developer.mozilla.org/en-US/docs/Web/CSS/margin

And this lets you actually try it out:

http://www.w3schools.com/css/css_margin.asp

Leave a Reply

Your email address will not be published. Required fields are marked *