CSS margin & padding of block elements

Margin and padding of block elements

Last updated on December 15, 2009. Tags: block elements, CSS layout, margin, padding, tableless web page layout

In designing the layout of a website, it is important to define the sides of a block element. A website designer should provide adequate spacing between divisions, paragraphs, item list and images to create a website layout that looks formal, organized and pleasing to the eyes. To accomplish this, designers frequently use two CSS attributes: margin and padding.

We can define a set of margin and padding attributes for divisions, images, paragraphs, lists and list items. In this article, I will discuss the behavior of margin and padding in block elements (or divisions). The behavior of these attributes in images, paragraphs, lists and list items will be covered in one of my future articles

How to code margin?

Similar to print media, margin can be defined as the width of space on the side of an element. If two block of texts were to place side by side, these blocks can approach one another only up to the extent allowed by the margin. The CSS code that defines the margin applicable to all sides of the block element is shown below:

.class-sample {
	margin: 10px;
}

In the above example, if a certain block element points to the .class-sample (<div class="class-sample">), that block element would have margin of 10 pixels at all sides.

The margins need not to be the same at all sides. In certain design or layout, the web designer might want to have a bigger margin on one side and smaller on another side. There are two ways of defining different margins for different sides. One is by having separate codes for each side:

#id-sample {
	margin-left: 10px;
	margin-right: 15px;
	margin-top: 5px;
	margin-bottom: 0;
}

The other way is by using a single line of code:

#id-sample {
	margin: 5px 15px 0 10px;
}

The sequence is top right bottom left. The margin on top is 5px, the margin on right is 15px and so on.

If there are only two numbers, like margin: 5px 15px;, the first number applies to top and bottom and the second number applies to left and right. If there are three numbers, like margin: 5px 15px 10px;, the first number applies to top, the second number applies to sides (both left and right) and the third applies to bottom.

You will also notice that whenever the margin is defined as 0, it's just 0. If your margin is not zero, you need to use unit like pixels (px), points (pt), inches (in) and centimeters(cm). However, if the margin is zero, you must not put any unit.

How margin works?

The way margin works with block elements and borders are summarized in the list below:

Margins increases the actual space needed by a block element.

For example, a 200px by 300px block element (width:200px; height:300px) with 10px margin actually needs a 220px by 320px space. Suppose we have two block elements with widths 200px and 500px, and both have margins of 10px. If we need to place them inside another block element (say for the purpose of creating a fixed-width layout), that containing block element must have width of not just 700px. It must have a width of 740px to accomodate the margins.
Margins do not overlap. If two adjacent block elements have margins of 10px, the total amount of separation between them will be 20px.
If there is a border, the margin lies outside the border.
The widths of the margin and the border separately contribute to the additional space needed by the block element. A 300px by 400px block element with margin of 10px and border thickness of 2px (e.g., margin:10px; border:2px solid #000000) will in fact, occupy a space of 324px by 424px.
If the block element has an assigned background color or repeating background image, the margin will still be transparent.

How to code padding?

Padding works in exactly the same way as margin except for a few differences in relation to border and background. The CSS code for padding is of exactly the same form as margin except that the word "margin" is replaced by padding.

.class-sample {
	padding: 10px;
}

Each side can also be given different paddings in a way similar to margins.

#id-sample {
	padding-left: 10px;
	padding-right: 15px;
	padding-top: 5px;
	padding-bottom: 0;
}

You can also assign different padding to each side using only a single line of code. The order in which each number applies is the same as margin. The effect in case there are only two or three numbers is also the same as margin. Moreover, just like in margin, a zero padding is simply coded as 0 but a non-zero padding must come with units like pixels, points, inches or centimeters.

#id-sample {
	padding: 5px 15px 0 10px;
}

How padding works?

As stated earlier, the only difference between padding and margin is the way they interact with border and background. Aside from that, margin and padding can coexist.

Padding increases the actual space occupied by a block element but without increasing the space that can contain other elements (text, image, etc.) within that block element. A 300px by 400px block element with 15px margin actually occupies a 330px by 430px space.
Paddings do not overlap. If two adjacent block elements have paddings of 10px and margin of 0, the block elements are in contact to one another, but the separation between the areas that can contain other elements is 20px.
If there is a border, the padding lies inside the border.
The widths of the padding and the border separately contribute to the additional space needed by the block element. A 300px by 400px block element with padding of 5px and border thickness of 1px will in fact, occupy a space of 312px by 412px.
If the block element has an assigned background color or repeating background image, the area of the padding will take the same background since it is still technically part of the block element.
If margin and padding are both defined to be non-zero, they will separately contribute to the additional space needed by the block element. If a block element has a padding of 10px, a margin of 8px and a transparent background, it will look appear as if the block element has a margin of 18px.
If the block element has background together with margin and padding, the background extends up to the area of the padding and the edge of the background area will still be 8px away from the adjacent block element.
If the block element has margin, padding and border, they will all separately contribute to the additional space needed by the block element. The separation between margin and padding space will also be more obvious because the padding space lies within the border while the margin space lies outside the border.