Непонятные отступы у текста в браузерах

sifilis · August 19, 2012

Создаём простенький html-документ следующего содержания:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>

<title>Paddings</title>

<meta http-equiv="content-type" content="text/html; charset=utf-8" />

<style type="text/css">

* {
    margin: 0;
    padding: 0;
    outline: 0;
    border: 0;
}

div.redBlock {
    margin: 100px;
    width: 300px;
    height: 50px;
    background: red;
    font-family: Arial, "Helvetica CY", "Nimbus Sans L", sans-serif;
    font-size: 10pt;
    color: white;
}

</style>

</head>

<body>

<div class="redBlock">
    This is example.
</div>

</body>
</html>

В теории у нас текст должен примкнуть к левому верхнему углу блока с красным фоном. Но давайте откроем тестовую страницу, к примеру, в Firefox 14.0.1, сделаем скриншот и посмотрим что у нас на самом деле (прикрепляю скриншот к теме). А получается у нас, что от левого края у текста остаётся 1 пиксель, а от верхнего края аж 9 (ДЕВЯТЬ!!!) пикселей! Что это за пиксели? Я их не звал, так чего они пришли?

mrnobody · August 19, 2012

Попробуйте c line-height поиграть.

Catherine · August 19, 2012

Возможно, эта статья поможет разобраться.

Catherine · August 19, 2012

Попробуйте c line-height поиграть.

И что получим в итоге? Хотя, возможно, я чего-то не понимаю?

Edited August 19, 2012 by Catherine

sifilis · August 19, 2012

Попробуйте c line-height поиграть.
И что получим в итоге? Хотя, возможно, я чего-то не понимаю?

Получим, что при значении 0.7 текст прижимается к верхней части.

Я просто почему это спрашиваю, надоело, что при вёрстке меню каждый браузер постоянно добавляет свои отступы для текста сверху.

psywalker · August 19, 2012

Попробуйте c line-height поиграть.
И что получим в итоге? Хотя, возможно, я чего-то не понимаю?
Получим, что при значении 0.7 текст прижимается к верхней части.
Я просто почему это спрашиваю, надоело, что при вёрстке меню каждый браузер постоянно добавляет свои отступы для текста сверху.

Ты не прав, дружище. Эти отступы являются "запаской" для того, чтобы твои строки не слипались. Имхо, убирать их просто глупо.

sifilis · August 19, 2012

Ну вот представим ситуацию. Есть у нас горизонтальное меню, в котором для выделения активного раздела тегу li добавляется фоновый цвет (все остальные имеют background transparent). И тут каждый браузер начинает добавлять свои отступы к верху. То есть у меня по дизайну между верхней частью буквы "Т" и верхней частью бекграунда 5 пикселей, а браузер добавляет ещё 5 пикселей. И получается у нас вместо 5 пикселей 10. Лажа получается.

psywalker · August 19, 2012

Ну вот представим ситуацию. Есть у нас горизонтальное меню, в котором для выделения активного раздела тегу li добавляется фоновый цвет (все остальные имеют background transparent). И тут каждый браузер начинает добавлять свои отступы к верху. То есть у меня по дизайну между верхней частью буквы "Т" и верхней частью бекграунда 5 пикселей, а браузер добавляет ещё 5 пикселей. И получается у нас вместо 5 пикселей 10. Лажа получается.

В жизни не сталкивался с такой проблемой, точнее даже подумать о ней было бы для меня глупо. Ограничивай высоту навигации, если очень надо.

Sign In

Непонятные отступы у текста в браузерах

Question

sifilis

Link to comment

Share on other sites

7 answers to this question

Recommended Posts

mrnobody

Link to comment

Share on other sites

Catherine

Link to comment

Share on other sites

Catherine

Link to comment

Share on other sites

sifilis

Link to comment

Share on other sites

psywalker

Link to comment

Share on other sites

sifilis

Link to comment

Share on other sites

psywalker

Link to comment

Share on other sites

Join the conversation

Обсуждения

Forums

Important Information