119 Adjust padding in Blogger templates August 01, 2007 /

"Padding defines the space which surrounds the content within an element, unlike margins, which define the space around the element itself. This is most noticable in blog templates whose elements (eg: sidebars, main posts section) have coloured backgrounds or borders. In similarity to margins, padding can be defined within the style section of your blog's template using CSS definitions. Here I will explain how padding can be defined, giving examples and images to help you alter the padding of elements in your own blog.

As I have mentioned, padding determines the space surrounding the content of an element. To explain what I mean by this, here are two examples of a table cell, the first has no padding defined while the second is padded by 10px on all sides:

A table cell with no padding

A table cell with padding

In blogs which feature borders around it's element, or differing background colours, defining the padding of each elements may be crucial in achieving a user friendly template design.

The padding definition for a particular blog element can be defined in the style section of your blog. Here is an example from my template which defines the padding used for the main posts section:

#main-wrapper {
margin-left: 14px;
width: 430px;
float: left;
border-left: 1px solid $borderColor;
border-right: 1px solid $borderColor;
background-color: $mainBgColor;
padding: 0 10px 0 10px;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
}

The line highlighted in red defines the padding in pixels for all four sides of this element in a clockwise direction beginning with the top:

1. Top-side: 0
2. Right side: 10px
3. Bottom side: 0
4. Left side: 10px

This ensures that the text (or any images) within the main posts section is distanced from the borders on either side.

Using this method, you can define padding for up to four different sides of an element, as in the following example:

sidebar {padding: 10px 12px 10px 12px;}

This defines 12 pixels of padding between the upper and lower borders of the sidebar and the sidebar content, and 10 pixels between the sides.

It is also possible to define equal padding for all sides of an element using a single statement, for example:

Sidebar {padding: 10px;}

This would ensure there is 10pixels of padding on all sides of the sidebar element.

You can also define padding for each side individually, as in the following examples:

padding-top: 1opx;
padding-right: 12px;
padding-bottom: 15px;
padding-left: 20px;

.

If you would like to experiment with values for padding, you can use the "Try it Editor" over at W3 Schools, which allows you to experiment with CSS styling for padding in the left window, and see the results in the right hand window.

If you prefer to experiment with your Blogger template, be sure to make a back-up of your template before saving any changes, in case you'd prefer to revert back to the way it looked before.

Related posts:

• Adjust margins in Blogger templates
• Create a 3 column Blogger template

Technorati Tags: blogger | template | design | padding | css | style