Каскадные Таблицы Стилей

индекс

324,89

Убираем лишний отступ внизу изображения

Наверное, многие, при html-верстке, встречали «баг», когда, размещая в блоке подряд два изображения, между ними возникает промежуток, примерно в 3-5 пикселей. Этот эффект присутствует не только в горячо любимом IE6, но и в других браузерах. Большинство решали это с бубнами – подменой Doctype, убиранием лишних отступов в html-файле и так далее.

Начав искать решение проблемы в интернете, в том числе и на хабре, я понял, что вопросов по этому поводу много, но правильного ответа большинство так и не нашли. В итоге выяснилось, что это вовсе не баг. IMG – внутристрочный элемент, и поэтому к нему применяется свойство vertical-align. В браузерах это свойство задается по умолчанию (в большинстве baseline, если не ошибаюсь).

Достаточно к изображению применить vertical-align:bottom и отступа внизу не будет. В других случаях будет неоднозначность, и браузеры будут вести себя на свое усмотрение.

Убираем лишний отступ внизу изображения img1

Убираем лишний отступ внизу изображения img1

+113

5 февраля 2009, 12:08

144

SOREST

комментарии (113)

barba 5 февраля 2009, 12:26 #

На мой взгляд то что вы написал — те же «решения с бубнами» потому что лучше разъяснить как ведет себя картика тем кто этого не понимает, а они уже исходя из этого и ситуации решают как убирать отстут, чем придумывать новый тип элементов — «внутристрочный элемент» (интересно почему он внутристрочный, если написано что картинки размещены в блоке — логично что должно быть «внутриблочный»)

–2

SOREST 5 февраля 2009, 12:44 # ↑

Не согласен с «те же «решения с бубнами»» — этот способ правильно отображается у всех браузерах, другие не всегда (из личного практического опыта). А этой статейкой я хотел просто показать решение проблемы.

barba 5 февраля 2009, 12:47 # ↑

да, только суть проблемы не понятна, поскольку нет ни картинок, ни подробного ее описания.

medvoodoo 5 февраля 2009, 14:46 # ↑

Извините господа, не понял за что данную статью так плюсуют, нет ни исследований поведения в случае многоблочности(если их будет 3 что будет с верхним элементом, а с левым?) ни описания dtd и внешних контейнеров. Да, согласен, интересное решение, но, субьективно, статья недостойная главной/
SOREST к вам пожелание, если уж по долгу службы дошли до этого руки посмотрите и опишите плиз, как себя ведут соседние элементы, а так же решение, где vertical-align нижней = топ. Плюс укажите если не сложно для какого контейнера это все проводится, т.к. все-таки body и div ведут себя по-разному в разных случаях. Плюс конечно с какими DTD пробовали :)

barba 5 февраля 2009, 12:51 # ↑

судя по всему в вашей проблеме изображения висят друг под другом по вертикали.
если им задать «display: block» то промежутка тоже не будет, например.
но вот вопрос: а есть ли где-то здесь текст? или другие элементы?

SOREST 5 февраля 2009, 13:30 # ↑

смотрите в код — нет

barba 5 февраля 2009, 13:37 # ↑

хм… я не вижу ни кода, ни картинок. у меня в вашем посте есть только три абзаца текста

SOREST 5 февраля 2009, 13:43 # ↑

есть две картинки, на них код — могу скинуть скриншот на мыло (дайте мейл)

barba 5 февраля 2009, 13:48 # ↑

спасибо, все увидел. ad-block убрал картинки потому что они висят на домене reklama.*

alTus 5 февраля 2009, 17:30 # ↑

Долго всматривался… А почему на картинках отличается только код? Если это наглядная демонстрация чего-то, то чего?

SOREST 5 февраля 2009, 17:39 # ↑

пырдон — менял код на xhtml, забыл присунуть

–3

bNN 5 февраля 2009, 17:48 # ↑

присунуть, пардон, чего? (куда или даже кому?!)

EzS 6 февраля 2009, 15:18 # ↑

Действительно, выражение «присунуть» употребляется в определённых контекстах-)

SOREST 5 февраля 2009, 12:56 # ↑

внутриблочный и внутристрочный — разные вещи. В моем примере блоков (div) нет. А внутристрочный — это значит — элемент внутри строки, как текст.

barba 5 февраля 2009, 13:04 # ↑

в вашем примере вообще ничего нет, кроме фразы «в блоке подряд два изображения»
а таких элементов как внутриблочный и внутристрочный тоже нет.
есть block, inline, run-in

так вот решение проблемы это понять к какому типу относится элемент, понять как он себя ведет контексте, в котором сейчас находится и исходя из этого внести правки в его отображение — такие как изменение свойства vertical-align или display.

а засорять голову «внутристрочными» элементами тем кто и так не понимает какие типы элементов есть и как они себя ведут — это не правильно.

akral 5 февраля 2009, 15:29 # ↑

inline = in-line = в-строка = внутри-строки = внутристрочный.
Нет?

akral 5 февраля 2009, 15:31 # ↑

Т. е. я понимаю, что принято называть «строчный», но, такая интрепретация у человека вполне может быть и почему надо за это гнобить? («чем придумывать новый тип элементов»)
Просто объясните и помогите ему.

–3

barba 5 февраля 2009, 15:44 # ↑

ну почему гнобить? просто поскольку статься ориентирована на новичков, то нужно не засорять людям голову самолично придуманными терминами, а использовать общепринятые.

вот пришел к вам два верстальщика устраиваться работать. вы их спрашиваете: что это за элемент?
один вам отвечает: внутристрочный, а второй: инлайн.

вы про какого подумаете что он больше разбирается в теме?

akral 5 февраля 2009, 15:50 # ↑

Мне кажется, что я пойму, что имеет в виду человек, говоря «внутристрочный» в контексте позиционирования элементов. И я оценю его попытку не засорять язык, которую только подстегну поправкой на корректное слово «строчный».
Однако это не значит, что я буду хуже относиться к человеку, употребляющему слово inline в русском языке, а буду оценивать по другим параметрам.

marapper 6 февраля 2009, 16:15 # ↑

«Строчный» и «блочный» — общепринятые названия. Добавка «внутри» здесь просто избыточно, т.к. название и так определяет уровень использовани элемента. Инлайн и блок — это да, это жаргонизмы.

И соглашусь с оратором где-то в ветке выше, что надо было объяснить почему так происходит и обосновать решение. Ваше решение — второе верное после использования display:block. Между блочными элементами используются только отступы самих элементов, а вот у строчных добавляется еще междустрочное расстояние.

Вариант же автора топика хорошо использовать, например, при размещении 4 картинок 2х2, т.к. нужны именно строчные элементы. Здесь выравнивание по низу даст правильный результат (в то время как базовая линия в разных браузерах рассчитывается по-разному — это можно увидеть на пример , например)

SelenIT2 23 января 2012, 04:39 # ↑

Переводить «inline» как «строчный» в контексте CSS нельзя, и вот почему.

В CSS есть иерархия боксов «block box» (блок) > «line box» (строка) > «inline box» (???). Смысл инлайн-боксов в том, что они размещаются внутри строк (или встраиваются в строку), а строки уже вписываются в блоки. А если inline перевести как «строчный» (бокс), как же будет переводиться «line»?

Часто «inline» переводят именно как «встраиваемый/встроенный». Но вариант «внутристрочный», на мой взгляд, самый интуитивный, исчерпывающий и однозначный («встраиваемый» еще можно спутать с «run-in»)…

Ну и в контексте HTML тоже лучше не плодить возможной путаницы а-ля «а почему строчные (inline) элементы генерируют встраиваемые (inline), а не строчные (line), боксы?..»

–2

barba 5 февраля 2009, 15:39 # ↑

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

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

akral 5 февраля 2009, 15:47 # ↑

Спасибо за введение в английский язык, но не стоило.

Просто формулировка «на мой взгляд, вообще следует по возможности избегать перевода» гораздо мягче и корректнее, чем «чем придумывать новый тип элементов». Ну да не важно.

НЛО прилетело и опубликовало эту надпись здесь

SOREST 5 февраля 2009, 12:37 # ↑

первая статья — старался!

ZiZZoKo 5 февраля 2009, 13:06 # ↑

Кстати а чем-нибудь особенным (в смысле, программа или онлайн-сервис) пользовались при оформлении?
Если да, то, пожалуйста, подскажите где такое. :)

SOREST 5 февраля 2009, 13:13 # ↑

нет — фотожоп, руки

sokiche 5 февраля 2009, 12:55 #

По-моему, проще всего прописать у изображения style=«display: block;»

CurlyBrace 5 февраля 2009, 13:11 # ↑

Это не всегда возможно.

Devgru 6 февраля 2009, 16:19 # ↑

Почему?

kostos 5 февраля 2009, 13:13 # ↑

А чем проще?
Меньше букв? :)

smmurf 5 февраля 2009, 13:27 # ↑

Проще или не проще — другой вопрос, но в данном случае можно было бы избавиться от br

–2

Gorky 5 февраля 2009, 13:30 # ↑

И короче, и семантически правильней )

barba 5 февраля 2009, 13:42 # ↑

модное нынче слово «семантика» в контексте верстки по смыслу не очень подходит к css — правилу.
семантика по отношению к верстке — есть использование html тэгов в соотсетствии с их семантическим предназначением.

например в тэг h1 вставлять заголовок.

не надо использовать это слово как дополнительный аргумент по отношению ко всему что связано с версткой. честно говоря, раздражает…

aps 5 февраля 2009, 14:15 # ↑

Cемантично сказано :)

ashmind 5 февраля 2009, 14:40 # ↑

Gorky имел в виду что
не несёт смысловой нагрузки (если это не стихотворение).
Слово «семантический» тут вполне к месту.

ashmind 5 февраля 2009, 14:41 # ↑

* что <br> не несёт смысловой нагрузки

CurlyBrace 5 февраля 2009, 13:11 #

Неверная формулировка вызывает вопросы, как в предыдущих комментариях. Есть блочные элементы, есть строчные/строковые. IMG — строчный элемент, поэтому и ведет себя как текст, и свойства приобретает сходные.

З.Ы. Перенесите в Каскадные Таблицы Стилей

SOREST 5 февраля 2009, 13:21 # ↑

Сначала хотел добавить в тематический блог — разобрался, перенес

barba 5 февраля 2009, 13:35 # ↑

img — не инлайн элемент.
img — замещаемый элемент. так же как, например, input

CurlyBrace 5 февраля 2009, 13:51 # ↑

DTD об этом видимо не знает:

<!ENTITY % special.pre
«br | span | bdo | map»>

<!ENTITY % special
"%special.pre; | object | img ">

<!ENTITY % fontstyle «tt | i | b | big | small „>

<!ENTITY % phrase “em | strong | dfn | code | q |
samp | kbd | var | cite | abbr | acronym | sub | sup „>

<!ENTITY % inline.forms “input | select | textarea | label | button»>


<!ENTITY % misc.inline «ins | del | script»>


<!ENTITY % misc «noscript | %misc.inline;»>

<!ENTITY % inline «a | %special; | %fontstyle; | %phrase; | %inline.forms;»>


<!ENTITY % Inline "(#PCDATA | %inline; | %misc.inline;)*">



<!ENTITY % heading «h1|h2|h3|h4|h5|h6»>
<!ENTITY % lists «ul | ol | dl»>
<!ENTITY % blocktext «pre | hr | blockquote | address»>

<!ENTITY % block
«p | %heading; | div | %lists; | %blocktext; | fieldset | table»>

<!ENTITY % Block "(%block; | form | %misc;)*">


<!ENTITY % Flow "(#PCDATA | %block; | form | %inline; | %misc;)*">

–9

barba 5 февраля 2009, 14:14 # ↑

а при чем здесь DTD? в DTD описывается синтаксис разметки. ее структуру.
а как это все будет отображаться (визуальное отображение) задает CSS. то есть будет картинка отображаться инлайн или блок или еще как-то DTD не указывает.

НЛО прилетело и опубликовало эту надпись здесь

–5

barba 5 февраля 2009, 14:46 # ↑

очень содержательно.

раз маразм, то значит я не понимаю что такое DTD, значит имеет смысл написать мне что это такое и какие функции выполняет.

чтобы я понял что не прав и больше так не думал, а соответственно и не писал.

так что же такое DTD и какие функции он выполняет?

firstbyte 5 февраля 2009, 16:33 # ↑

CurlyBrace 5 февраля 2009, 16:17 # ↑

Ну а теперь представьте что у вас документ без стилей. Вобще. По-вашему получается, он вобще отображаться не будет?

barba 5 февраля 2009, 16:32 # ↑

я всегда думал что если стили не указаны, то броузер проставляет их в соотсетствии со своими представлениями о занчениях аттрибутов стилей по умолчанию. для этого, например, некоторый обнуляют отступы и поля.
и DTD на это представление влияет только косвенным образом — например изменением режима рендеринга при определенных условиях наличия или отсутсвия указания DOCTYPE

CurlyBrace 5 февраля 2009, 16:45 # ↑

Ресеты применяются для того чтобы обнулить дефолтные значения HTML-элементов.

dinamyte написал хорошую статью о DTD.

barba 5 февраля 2009, 17:03 # ↑

спасибо.
на мой взгляд, наиболее правильная форма диалога — написал свое мнение получил ответ о том что не прав с информацией почему именно ты не прав, а не комментарий типа: «маразм» и минус в карму =)

CurlyBrace 5 февраля 2009, 17:07 # ↑

Я тоже против категоричности, неподкрепленной фактами. Другое дело, что когда у человека нет сил/времени пускаться в объяснения, то ему проще резко возразить ))

НЛО прилетело и опубликовало эту надпись здесь

SOREST 6 февраля 2009, 11:24 # ↑

вот и я о том же — я хотел дать максимально лаконичный пример, сделать акцент на главном — а не на xhtml или html он написан, какой доктайп и так далее

НЛО прилетело и опубликовало эту надпись здесь

vilky 5 февраля 2009, 18:13 # ↑

Хм, очень хорошо, что вы так серьёзно относитесь к языку, что даже прочитали выше лекцию против засорения речи словами вроде «внутристрочный» и «семантический».

Вот только в русской грамматике принято слова с предшествующими им несклоняемыми определениями («inline-элемент»), писать через дефис, если уж невозможно избежать такого словоупотребления. «Внутристрочный» было грамотней.

НЛО прилетело и опубликовало эту надпись здесь

–2

netking 5 февраля 2009, 13:25 #

все намного проше!
два изображение подряд ставте, без перевода строки в верстке… не будет пробела ;)))

smmurf 5 февраля 2009, 13:28 # ↑

Будет, при стандартном режиме рендеринга.
При «почти стандартном» или quirks — действительно не будет.

–7

netking 5 февраля 2009, 13:39 # ↑

какой не стандартный рейндеринг? вы о чем?
это теги HTML, броузеры их кушают… кто кого рендерит?

socket378 5 февраля 2009, 13:42 # ↑

гугли стандарты, школие.

smmurf 5 февраля 2009, 14:25 # ↑

Браузер рендерит HTML, если вы это спрашивали. Не наоборот.
А вот рендерить могут по-разному.
Вы доктайп в документы ставите? Если да, то зачем?

Vasylko 6 февраля 2009, 12:40 # ↑

Если уже два изображения стоят по вертикали, и мы знаем что они будут друг под другом, то почему бы просто их не сделать одним изображением. Проблема не просто решена — ее не будет :)

НЛО прилетело и опубликовало эту надпись здесь

barba 5 февраля 2009, 13:43 # ↑

ммм… теперь понятно почему я вижу только текст. спасибо =)

SOREST 5 февраля 2009, 13:45 # ↑

теперь понятно — перезакачаю

egorinsk 5 февраля 2009, 21:56 # ↑

Моя баннерорезка в опере пропустила. Нечего блокировать домены по слову вродк banner, это же просто глупо.

НЛО прилетело и опубликовало эту надпись здесь

BACRHR 5 февраля 2009, 13:52 #

Указываем font-size:0 и тоже нормально работает, или ели не получаеться, то просто удалаем «ентеры» между img и br

<div style="font-size:0">
    <img src="1226584229_sweet-42.jpg" width="230" /> 
    <br />
    <img src="1226584229_sweet-42.jpg" width="230" />
</div>

или

<img src="1226584229_sweet-42.jpg" width="230" /><br /><img src="1226584229_sweet-42.jpg" width="230" />

НЛО прилетело и опубликовало эту надпись здесь

BACRHR 5 февраля 2009, 14:04 # ↑

ну как вам сказать, вообще структура

<img /><br /><img />

само по себе замазывание. Тут можно сказать, придумай себе проблему, реши ее, и напиши об этом на хабре!

SOREST 5 февраля 2009, 14:17 # ↑

это только пример — можно в блоке с заданной шириной просто два img. Суть проблемы та же.

m_ig 5 февраля 2009, 14:08 # ↑

На сколько я помню при указании font-size: 0 альтернативный текст в альтернативных браузерах будет совсем не виден, поэтому в качестве решения не предлагал бы использовать.

timteka 5 февраля 2009, 13:52 #

А вот любопытная штука, мне кажется, что пора уже привыкать к синтаксису XHTML и тем более в примерах показывать новичкам «валидный» код. А то ведь привыкнут к этой «заразе». Я к тому, что '
' все ж следует юзать как '
' (равно как и остальные тэги). Скорей всего, не за горами времена, когда старый добрый html канет в лету.

timteka 5 февраля 2009, 13:56 # ↑

Пардон. Я про <br/>, <img/>

–1

akral 5 февраля 2009, 15:35 # ↑

Не будем устраивать холивар на тему «HTML v XHTML», давайте условимся просто уважать оппонента и не навязывать новичкам своё мнение в таких формулировках. ^_~

timteka 5 февраля 2009, 16:39 # ↑

Нуу, если никогда и ничего не навязывать новичкам, глядишь, прогресс пойдет в обратную сторону… а там уже и до каменного века недалеко. Вот тогда действительно ни html, ни xhtml никому не будут нужны :-D.
Html, так уж получилось, в силу исторических объективных причин был писан мягко говоря «нестандартно». Спустя много лет это уже аксиома. И никаким холиваром тут не пахнет. Если новичок хочет стать грамотным, будет просто вынужден изучать «правила» xhtml (по крайней мере). А то ведь дальше пойдут всякие xml/xsl и прочие ужасы. И тогда амба :-)

smmurf 5 февраля 2009, 16:50 # ↑

Правила XHTML знать надо, никто не спорит, я надеюсь.
А вот применять его повсеместно без необходимости — не надо.

SOREST 5 февраля 2009, 16:58 # ↑

по многократным просьбам сделал xhtml

НЛО прилетело и опубликовало эту надпись здесь

smmurf 5 февраля 2009, 16:13 # ↑

Я искренне надеюсь, что XHTML канет в лету раньше.

НЛО прилетело и опубликовало эту надпись здесь

–2

NikoM 5 февраля 2009, 13:58 #

С такимже успехом можно сказать что «баг» это растояние 3-5 пикселей между строками.
Картинки лучше поместить в таблицу.

zeitgeist 5 февраля 2009, 14:03 # ↑

Высоту строки лучше задавать однозначно свойством line-height. Потому что в разных браузерах она бывает разной по умолчанию. И будете всегда знать откуда берутся «лишние» растояния между строками.

SOREST 5 февраля 2009, 14:08 # ↑

В таблицу — это по воробьям з чего то такого большого )

pepelsbey 5 февраля 2009, 16:01 # ↑

Картинки лучше поместить в таблицу

Жители Хабра приветствуют тебя, гость из прошлого века!

zeitgeist 5 февраля 2009, 14:01 #

Задавался вопросом в начале своей карьеры верстальщика, почему-то сразу нашел ответ vertcal-align, кто предпочитает bottom, кто top, зависит от конкретного проекта еще. Мне чаще приходится использовать top.
За статью спасибо, новичкам пригодится.

НЛО прилетело и опубликовало эту надпись здесь

m_ig 5 февраля 2009, 14:03 #

На самом деле решений действительно два (о которых мне известно):

1) изменяем свойство vertical-align;
2) изменяем свойство display.

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

slesar 5 февраля 2009, 17:32 # ↑

Причем, для одиноких или позиционированных вправо/влево картинок очень хорошо подходит display:block. А для картинок в тексте отступ убирается отрицательным значением: margin-bottom: -5px или вроде того.

Spy 5 февраля 2009, 14:20 #

не люблю лишние br'ки :)
как правило использую display: block, если надо одну картинку под другой сделать, хотя бывают разные случаи.

+12

pritkoff 5 февраля 2009, 14:35 #

да, серьезная тема!
Хотелось бы ещё почитать, что нибудь, вроде «Выравниваем текст по центру» или «Задаём шрифт Вердана» — проблемы по сути не менее актуальные )

–2

barba 5 февраля 2009, 14:48 # ↑

да вы ничего не поняли.
не надо читать ничего. на картинке лучше посмотрите. какие красивые. )

–1

anklem 5 февраля 2009, 14:44 #

У вас очень красивые картинки к посту.

kost 5 февраля 2009, 14:53 #

На картинках у тега <img/> не указан обязательный атрибут.

–3

SOREST 5 февраля 2009, 15:00 # ↑

если это xhtml то да, если html — нет

pepelsbey 5 февраля 2009, 16:02 # ↑

А Хабр у нас на чём написан? Ага.

НЛО прилетело и опубликовало эту надпись здесь

kost 5 февраля 2009, 17:29 # ↑

Если html — то тоже пропущен. Я об alt, если вдруг кто-то не догадался.

web4_0 5 февраля 2009, 16:43 #

<br />

нужен, если вдруг CSS не загрузится. А если в вертикальную линеечку 30 штук рисунков будет? Тогда они же без

<br />

горизонтально выстроятся, а это ужас будет, уж поверьте.

НЛО прилетело и опубликовало эту надпись здесь

slesar 5 февраля 2009, 17:36 # ↑

Вообще, в идеале, XHTML может использоваться и как ресурс с данными. Тогда он очень важен и без CSS. Ведь так много сейчас внимания уделяется «семантической» верстке. В первую очереь, в документе должна быть логика, а уже потом — оформление. Если по логике важны отступы между элементами, они должны быть и без CSS.

RayZ 5 февраля 2009, 18:44 #

<BR/> в форматировании нетекстовых блоков вообще — зло!

НЛО прилетело и опубликовало эту надпись здесь

egorinsk 5 февраля 2009, 22:01 #

Специально для тех, кто не понимает магии. Картиники, как указано выше inline-элемент, и во многом отображаются (и ведут себя) как и текст, то есть на них влияют vertical-align, line-height и прочее. По умолчанию как я понимаю картинка выравнивается по baseline (а это значит не по нижней границе абзаца, а по базвовй линии шрифта — чуть выше), и поэтому уезжает вверх. Сделайте например border-bottom: 1px dashed green; (или outline на норм. браузерах) и подсветите фон блока, в котором они содержатся — и все будет наглядно видно.

–2

easterism 6 февраля 2009, 02:40 #

«Большинство решали это с бубнами» — вы исследование проводили?

img {margin:0; padding:0; border-width:0;}
и не надо никаких бубнов

P.S. Соблюдайте стандарты, они для того и созданы.

НЛО прилетело и опубликовало эту надпись здесь

Buran 6 февраля 2009, 07:14 #

Возможно повторюсь.

Image-элемент согласно всем писаным стандартам является инлайновым (или, как его назвал автор, «внутристрочным»). Поэтому одна картинка внутри блока расценивается как строка. А внизу строки браузер резервирует дополнительное мест для таких букв как «у», «р» и др. (как этот «выступ» называется в типографике?). Отсюда и отступ.

Исключения: в Quirks mode картинка — блочный элемент, в Almost Strict mode тоже.

Информацию взял с сайта quirksmode.org

XAMelleOH 6 февраля 2009, 18:34 #

Нашли проблему, решили ее, а ПОЧЕМУ так отображается — НИКТО (насколько я просмотрел комментарии) так и не сказал.

Ну и что что img инлайн елемент? У всех инлайн елементов отступ снизу?

Ведь ответ таится в том что у img vertical-align по умолчанию baseline, то есть низ картинки будет находиться там, где находиться нижний край всех нормальных букв :) кроме «р», «д», «у», «ф» и так далее, которые имеют закарлючки снизу, потому и появляется отступ.

А вот из ЭТОГО уже следуют теперь уже ОЧЕВИДНЫЕ вещи, что vertical-align:bottom и line-height: 0 спасут ситуацию.

УЧИТЕСЬ ИСКАТЬ КОРЕНЬ ПРОБЛЕМЫ, А НЕ СРАЗУ ЕЕ РЕШЕНИЕ, тогда все станет намного проще.

НЛО прилетело и опубликовало эту надпись здесь

XAMelleOH 6 февраля 2009, 19:11 # ↑

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

Потому что из того что елемент строчный и если ему присвоить line-height: 0 среднестатистический хабровчанин навряд ли поймет почему пропадает отступ.

А вообще, эту проблему должен знать с самого начала каждый верстальщик, а то опускаемся до песочницы…