WordPress Tutorials Index | Web Page Design Tutorials Home

Modifying Padding and Margin of WordPress Header

Like other portal websites, for example, osCommerce and phpNuke, the stylesheet play an important role in controlling the appearance of WordPress theme. It really needs to pay some time to study the stylesheet if wish to customize the theme of WordPress.

Space Above the Blog Title

It seems to have too much space above the Blog Title. The space should be set in the stylesheet. We found out that the spacing (padding) is setting in the padding-top properties of the #header selector.

Modify WordPress Stylsheet Header Section

The space above the Blog Title can be removed easily by setting a zero to the padding-top properties:

#header {
    padding: 0px;
}

Look! The space above the WordPress Blog Title has been removed as shown in the diagram below:

Remove Wordpress Header Padding

Spaces on Two Sides and Top of Header

Take a look at the Header of WordPress again, there are spaces on the two sides and on the top.

Wordpress Header Padding and margin on stylesheet

The spacing on two sides of WordPress Header can be removed by changing the padding properties of #wrapper div tag to zero. This way, there will be no any padding for the #wrapper.

#wrapper {
    background: #fff;
    margin-top: 20px;
    padding: 0px;
}

Here’s how the WordPress theme look like after the padding of #wrapper has been removed:

Wordpress Header Padding and margin on stylesheet

How about the space on the top? This can easily be adjusted or removed by modifying the margin-top properties of #wrapper. Let’s removed the margin on the top as shown below:

#wrapper {
    background: #fff;
    margin-top: 0px;
    padding: 0px;
}

The theme of WordPress now becomes:

Wordpress Header Padding and margin on stylesheet

This WordPress themes looks much better!