CODEWITHSUNDEEP
htmlcsstextfontspadding
Lucas Gruber
Lucas Gruber

Reputation: 31

HTML text elements have padding that isn't consistent between browsers after setting padding to 0

I've given the elements a border so that you can see the inconsistent padding. The only thing I have added is a padding-left to each of the 3 elements. I'm trying to space the headlines vertically with even space between across different browsers. Can't figure it out.

Here is how it looks in Chrome: http://postimage.org/image/ly5gzp0k5/

Here is how it looks in IE: http://postimage.org/image/qa34t76al/

All padding top and bottom is set to zero. In fact, all css is reset to my knowledge and after hours of trying to figure it out, I decided to post on Stack Overflow hoping for any help someone could provide.

Thanks in advance.

Upvotes: 0

Views: 266

Answers (2)

SpiritedSparky
SpiritedSparky

Reputation: 1

Padding is handled differently in browsers due to different box models. You can use the css property "box-sizing" to set use one box model over another.

I'd suggest defining which box model to use in your css:

http://css-tricks.com/box-sizing/

Upvotes: 0

Mateusz Rogulski
Mateusz Rogulski

Reputation: 7455

You can use line-height to positioning your text vertically. Here is some example for how to use it.

Upvotes: 1

Related Questions