Почему padding вокруг текста в разных браузерах

[Artem Narushevich]

.one {
padding: 0.3em;
}


<span class="one">Hello, everyone</span>


Почему в разных браузерах по-разному рисуется плашка (верхний отступ скачет)? И как сделать, чтобы она располагалась, как в Safari (центр по строчным буквам, а не прописным)?

[gJam]

Здравствуйте!
Попробуйте явно определить font-family и font-size, а для того, чтобы сделать текст в блоке без padding'а можно попробовать line-height

[Artem Narushevich]

Но line-height будет действовать на весь "текстовый контейнер" (т.е. вместе с синим фоном), отступы он не создаст.
А с display: inline-block - то же самое выходит.
Наверное, здесь придется собирать какое-то нагромождение из блоков с позиционированием, простым решением не получится.

[gJam]

Не, тут все просто, все за 1 блок.

.one{
padding: 10px;
height:15px;
width:50px;
line-height:15px;
text-align:center;
background: blue;
}

Должно работать, Artem Narushevich.
Однако можно попробовать и без line-height'a

Есть еще второй вариант, изначально создать блок с отступами (для статического содержимого - самое то!)

.one{
width:200px;
height:50px;
text-align:center;
line-height:50px;
font-size:12px;
background:blue;
}