1

How can I achieve that the text inside a div has the same padding-top in Firefox and in Chrome? In Firefox it has apadding-top of in this case 3px by default and Chrome only has 2px.

js fiddle

HTML

<div class="wrap">
    <div class="content">Hello World</div>
</div>

CSS

.wrap{
border: 1px solid;
background: lightblue;
height: 50px;
width: 120px;
font-family: sans-serif;
}
pes502
  • 1,574
  • 3
  • 17
  • 30
user2952265
  • 1,430
  • 5
  • 16
  • 30

4 Answers4

1

If you want to vertical align text inside the div.

Refer the question to get your answer Vertically align text in a div

DEMO

You have 50px height in your div. So just simple give line-height:50px; property to your class. If you increase your height of your div , then increase you line-height as well.

If you want the align the text to center, then add the text-align:center;.

Community
  • 1
  • 1
Sandeep Pattanaik
  • 604
  • 4
  • 19
-1

You simply need to set the text's leading with the CSS line-height property. Different browsers will likely have different defaults.

http://jsfiddle.net/vJB4F/2/

i_like_robots
  • 2,550
  • 2
  • 15
  • 21
  • Compare FF and Chrome, your solution does not work [jsfiddle](http://jsfiddle.net/vJB4F/5/) – user2952265 Jul 15 '14 at 10:48
  • Please take a closer look at my code, that's not what I did. I used a pixel value so the height of line block will always be the same across browsers. There will _always_ be subtle differences in the rendering of glyphs between browsers, either because of rendering technology or font variation or format used. – i_like_robots Jul 15 '14 at 12:45
  • [js fiddle](http://jsfiddle.net/vJB4F/8/) -> even with pixels, there is a difference of 1 Pixel, which looks strange, if working with a small font inside a small box. Seems there is no solution. – user2952265 Jul 15 '14 at 12:58
-1

Do you use a reset css ? See http://www.cssreset.com/, and test with.

Florian B
  • 121
  • 1
  • 2
  • 13
-1

The different browsers and their cores are using different default settings in the html code. THe simplest solution is to use every time a reset css code. That code must be included just before your code and will rearrange all the differences you may find further.

A reset css example

ventsi.slav
  • 334
  • 1
  • 4
  • 14