CODEWITHSUNDEEP
htmlcss
Patrick Reck
Patrick Reck

Reputation: 11374

CSS Padding moves more than 1 pixel on <h1> tag

I can't figure out why padding-top: 0px to padding-top: 1px; moves the <h1> element more than 1 pixel. Increasing it further, to for instance 2 pixels, will have the expected result.

CSS

.pageholder {
    padding: 15px;
    padding-top: 0px;
    //padding-top: 1px;
    background-color: white;
}

HTML

<div id="content">
    <div class="pageholder">
            <h1>Add item link</h1>
    </div>
</div>

...aaand finally, a jsfiddle with the problem: http://jsfiddle.net/xbAqC/

(remove the // to see the difference)

Upvotes: 2

Views: 1503

Answers (4)

OriShuss
OriShuss

Reputation: 269

You set a padding-top AND a padding. Both can't co-exist. There are 2 ways to solve it. One is to just remove the padding and add a different padding to each side, and the second (better) one is to add a padding which exists for every side together but with different values:

padding: 16px 15px 15px 15px;

In the example above, the first number is the top, second is right, third bottom and fourth left. The numbers start from the top and go clockwise.

Fiddle

Upvotes: 0

Bip
Bip

Reputation: 697

try this: LINK

.pageholder h1 {
    padding:15px ;
    padding-top: 1px;
    //padding-top: 1px;
    background-color: white;
}

Upvotes: -1

Explosion Pills
Explosion Pills

Reputation: 191729

Padding on the inner div prevents margin collapse. The default top margin of the <h1> is collapsing with the <body>'s margin when the padding is not there. The padding prevents this.

You can see the difference by removing the <body>'s margin: http://jsfiddle.net/xbAqC/2/

Upvotes: 8

Screech129
Screech129

Reputation: 110

H1 tags have their own margin and padding. Set your h1's padding and margin to 0 and it should solve your problem.

Upvotes: 0

Related Questions