View Full Version : adding padding adds extra bottom margin

10-28-2008, 12:15 AM
Well that got your attention. Sorry, I'm not female or sexy but I do need help on some CSS. No one seemed interested when the title said 'Padding Problem'! Please can someone help me with the following:

I have added a background image to an h1 tag. I now wish to add some top and left padding to the h1 text in order to get the text where I want it. When I add padding-top 3px it moves the h1 text down as required, but it also adds 3px of blank space bellow the background image, which is not what I want. I have counteracted this by adding margin-bottom: -3px; but this doesn't seem right to me.

The css is as follows:

.RecruitersAdvertisers h1, .JobSeekers h1 {
background-repeat: no-repeat;
border-left: solid 1px silver;
border-right: solid 1px silver;
padding-left: 5px;
padding-top: 3px;
margin-bottom: -3px;
height: 22px;

You can also see the full version online at:

Any help would be much appreciated cos I have reached a brick wall with this.



10-28-2008, 12:21 AM
Hey mate, remove the top/bottom margins and padding and give line-height:22px a try. That will centre it in the middle of the 22px height. You can modify that accordingly. Padding left works fine also text-indent would do as well.

You can also use shorthand to combine this:

background-repeat: no-repeat;


background:url(images/bj_menubg.jpg) no-repeat;

10-28-2008, 12:24 AM
Funniest and best way I have ever seen anyone get attention called to their thread :D

10-28-2008, 12:26 AM
Just change your height to 18px

Because remember height is just not the total height.
total height = height + margin + padding

so your 22px height + 3px padding is giving 25px height

so jus take the 3px off and have 18px height and keep the padding.

10-28-2008, 07:43 AM
Funniest and best way I have ever seen anyone get attention called to their thread :D

Maybe, but that was all sorts of inappropriate and broke not only one but several forum rules and guidelines. :|