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

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

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

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

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

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

    Similar posts

    Ads
    AdBlock has stolen the banner, but banners are not teeth — they will be back

    More

    Comments 113

      +9
      На мой взгляд то что вы написал — те же «решения с бубнами» потому что лучше разъяснить как ведет себя картика тем кто этого не понимает, а они уже исходя из этого и ситуации решают как убирать отстут, чем придумывать новый тип элементов — «внутристрочный элемент» (интересно почему он внутристрочный, если написано что картинки размещены в блоке — логично что должно быть «внутриблочный»)
        –2
        Не согласен с «те же «решения с бубнами»» — этот способ правильно отображается у всех браузерах, другие не всегда (из личного практического опыта). А этой статейкой я хотел просто показать решение проблемы.
          +2
          да, только суть проблемы не понятна, поскольку нет ни картинок, ни подробного ее описания.
            +7
            Извините господа, не понял за что данную статью так плюсуют, нет ни исследований поведения в случае многоблочности(если их будет 3 что будет с верхним элементом, а с левым?) ни описания dtd и внешних контейнеров. Да, согласен, интересное решение, но, субьективно, статья недостойная главной/
            SOREST к вам пожелание, если уж по долгу службы дошли до этого руки посмотрите и опишите плиз, как себя ведут соседние элементы, а так же решение, где vertical-align нижней = топ. Плюс укажите если не сложно для какого контейнера это все проводится, т.к. все-таки body и div ведут себя по-разному в разных случаях. Плюс конечно с какими DTD пробовали :)
            +9
            судя по всему в вашей проблеме изображения висят друг под другом по вертикали.
            если им задать «display: block» то промежутка тоже не будет, например.
            но вот вопрос: а есть ли где-то здесь текст? или другие элементы?

              0
              смотрите в код — нет
                +2
                хм… я не вижу ни кода, ни картинок. у меня в вашем посте есть только три абзаца текста
                  0
                  есть две картинки, на них код — могу скинуть скриншот на мыло (дайте мейл)
                    0
                    спасибо, все увидел. ad-block убрал картинки потому что они висят на домене reklama.*
                      +1
                      Долго всматривался… А почему на картинках отличается только код? Если это наглядная демонстрация чего-то, то чего?
                        0
                        пырдон — менял код на xhtml, забыл присунуть
                          –3
                          присунуть, пардон, чего? (куда или даже кому?!)
                            +1
                            Действительно, выражение «присунуть» употребляется в определённых контекстах-)
              0
              внутриблочный и внутристрочный — разные вещи. В моем примере блоков (div) нет. А внутристрочный — это значит — элемент внутри строки, как текст.
                +3
                в вашем примере вообще ничего нет, кроме фразы «в блоке подряд два изображения»
                а таких элементов как внутриблочный и внутристрочный тоже нет.
                есть block, inline, run-in

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

                а засорять голову «внутристрочными» элементами тем кто и так не понимает какие типы элементов есть и как они себя ведут — это не правильно.
                  0
                  inline = in-line = в-строка = внутри-строки = внутристрочный.
                  Нет?
                    +1
                    Т. е. я понимаю, что принято называть «строчный», но, такая интрепретация у человека вполне может быть и почему надо за это гнобить? («чем придумывать новый тип элементов»)
                    Просто объясните и помогите ему.
                      –3
                      ну почему гнобить? просто поскольку статься ориентирована на новичков, то нужно не засорять людям голову самолично придуманными терминами, а использовать общепринятые.

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

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

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

                          Вариант же автора топика хорошо использовать, например, при размещении 4 картинок 2х2, т.к. нужны именно строчные элементы. Здесь выравнивание по низу даст правильный результат (в то время как базовая линия в разных браузерах рассчитывается по-разному — это можно увидеть на пример , например)
                          • UFO just landed and posted this here
                        –2
                        нельзя переводить слова в отрыве от контекста, а тем более разбивая их на части.
                        добро пожаловать в английский язык, где одно слово имеет очень много значений.

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

                          Просто формулировка «на мой взгляд, вообще следует по возможности избегать перевода» гораздо мягче и корректнее, чем «чем придумывать новый тип элементов». Ну да не важно.
                • UFO just landed and posted this here
                    +2
                    первая статья — старался!
                      0
                      Кстати а чем-нибудь особенным (в смысле, программа или онлайн-сервис) пользовались при оформлении?
                      Если да, то, пожалуйста, подскажите где такое. :)
                        +1
                        нет — фотожоп, руки
                    +7
                    По-моему, проще всего прописать у изображения style=«display: block;»
                      0
                      Это не всегда возможно.
                        0
                        Почему?
                        0
                        А чем проще?
                        Меньше букв? :)
                          +3
                          Проще или не проще — другой вопрос, но в данном случае можно было бы избавиться от br
                          –2
                          И короче, и семантически правильней )
                            +2
                            модное нынче слово «семантика» в контексте верстки по смыслу не очень подходит к css — правилу.
                            семантика по отношению к верстке — есть использование html тэгов в соотсетствии с их семантическим предназначением.

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

                            не надо использовать это слово как дополнительный аргумент по отношению ко всему что связано с версткой. честно говоря, раздражает…
                              +4
                              Cемантично сказано :)
                                +2
                                Gorky имел в виду что
                                не несёт смысловой нагрузки (если это не стихотворение).
                                Слово «семантический» тут вполне к месту.
                                  0
                                  * что <br> не несёт смысловой нагрузки
                            +2
                            Неверная формулировка вызывает вопросы, как в предыдущих комментариях. Есть блочные элементы, есть строчные/строковые. IMG — строчный элемент, поэтому и ведет себя как текст, и свойства приобретает сходные.

                            З.Ы. Перенесите в Каскадные Таблицы Стилей
                              0
                              Сначала хотел добавить в тематический блог — разобрался, перенес
                                0
                                img — не инлайн элемент.
                                img — замещаемый элемент. так же как, например, input
                                  +5
                                  DTD об этом видимо не знает:

                                  <!--=================== Text Elements ====================================-->

                                  <!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»>

                                  <!-- these can occur at block or inline level -->
                                  <!ENTITY % misc.inline «ins | del | script»>

                                  <!-- these can only occur at block level -->
                                  <!ENTITY % misc «noscript | %misc.inline;»>

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

                                  <!-- %Inline; covers inline or «text-level» elements -->
                                  <!ENTITY % Inline "(#PCDATA | %inline; | %misc.inline;)*">

                                  <!--================== Block level elements ==============================-->

                                  <!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;)*">

                                  <!-- %Flow; mixes block and inline and is used for list items etc. -->
                                  <!ENTITY % Flow "(#PCDATA | %block; | form | %inline; | %misc;)*">
                                    –9
                                    а при чем здесь DTD? в DTD описывается синтаксис разметки. ее структуру.
                                    а как это все будет отображаться (визуальное отображение) задает CSS. то есть будет картинка отображаться инлайн или блок или еще как-то DTD не указывает.
                                    • UFO just landed and posted this here
                                        –5
                                        очень содержательно.

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

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

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

                                          0
                                          DTD — что-то вроде XML документа с описанием составных частей пространства некоторого абстрактного XML-языка. В данном случае (X)HTML.
                                          Но кстати я вот что нашёл:

                                          <!-- content is %Inline; excluding
                                          "img|object|applet|big|small|sub|sup|font|basefont" -->
                                        +1
                                        Ну а теперь представьте что у вас документ без стилей. Вобще. По-вашему получается, он вобще отображаться не будет?
                                          +1
                                          я всегда думал что если стили не указаны, то броузер проставляет их в соотсетствии со своими представлениями о занчениях аттрибутов стилей по умолчанию. для этого, например, некоторый обнуляют отступы и поля.
                                          и DTD на это представление влияет только косвенным образом — например изменением режима рендеринга при определенных условиях наличия или отсутсвия указания DOCTYPE
                                            +1
                                            Ресеты применяются для того чтобы обнулить дефолтные значения HTML-элементов.

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

                                                0
                                                Я тоже против категоричности, неподкрепленной фактами. Другое дело, что когда у человека нет сил/времени пускаться в объяснения, то ему проще резко возразить ))
                                              • UFO just landed and posted this here
                                                  +1
                                                  вот и я о том же — я хотел дать максимально лаконичный пример, сделать акцент на главном — а не на xhtml или html он написан, какой доктайп и так далее
                                                  • UFO just landed and posted this here
                                              • UFO just landed and posted this here
                                            • UFO just landed and posted this here
                                            0
                                            Хм, очень хорошо, что вы так серьёзно относитесь к языку, что даже прочитали выше лекцию против засорения речи словами вроде «внутристрочный» и «семантический».

                                            Вот только в русской грамматике принято слова с предшествующими им несклоняемыми определениями («inline-элемент»), писать через дефис, если уж невозможно избежать такого словоупотребления. «Внутристрочный» было грамотней.
                                            • UFO just landed and posted this here
                                            –2
                                            все намного проше!
                                            два изображение подряд ставте, без перевода строки в верстке… не будет пробела ;)))
                                              +1
                                              Будет, при стандартном режиме рендеринга.
                                              При «почти стандартном» или quirks — действительно не будет.
                                                –7
                                                какой не стандартный рейндеринг? вы о чем?
                                                это теги HTML, броузеры их кушают… кто кого рендерит?
                                                  +7
                                                  гугли стандарты, школие.
                                                    +3
                                                    Браузер рендерит HTML, если вы это спрашивали. Не наоборот.
                                                    А вот рендерить могут по-разному.
                                                    Вы доктайп в документы ставите? Если да, то зачем?
                                                    0
                                                    Если уже два изображения стоят по вертикали, и мы знаем что они будут друг под другом, то почему бы просто их не сделать одним изображением. Проблема не просто решена — ее не будет :)
                                                • UFO just landed and posted this here
                                                    0
                                                    ммм… теперь понятно почему я вижу только текст. спасибо =)
                                                      0
                                                      теперь понятно — перезакачаю
                                                        0
                                                        Моя баннерорезка в опере пропустила. Нечего блокировать домены по слову вродк banner, это же просто глупо.
                                                        • UFO just landed and posted this here
                                                      • UFO just landed and posted this here
                                                          +4
                                                          Указываем 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" />
                                                          • UFO just landed and posted this here
                                                              +5
                                                              ну как вам сказать, вообще структура
                                                              <img /><br /><img />
                                                              само по себе замазывание. Тут можно сказать, придумай себе проблему, реши ее, и напиши об этом на хабре!
                                                                0
                                                                это только пример — можно в блоке с заданной шириной просто два img. Суть проблемы та же.
                                                              +1
                                                              На сколько я помню при указании font-size: 0 альтернативный текст в альтернативных браузерах будет совсем не виден, поэтому в качестве решения не предлагал бы использовать.
                                                              0
                                                              А вот любопытная штука, мне кажется, что пора уже привыкать к синтаксису XHTML и тем более в примерах показывать новичкам «валидный» код. А то ведь привыкнут к этой «заразе». Я к тому, что '
                                                              ' все ж следует юзать как '
                                                              ' (равно как и остальные тэги). Скорей всего, не за горами времена, когда старый добрый html канет в лету.
                                                                0
                                                                Пардон. Я про <br/>, <img/>
                                                                  –1
                                                                  Не будем устраивать холивар на тему «HTML v XHTML», давайте условимся просто уважать оппонента и не навязывать новичкам своё мнение в таких формулировках. ^_~
                                                                    0
                                                                    Нуу, если никогда и ничего не навязывать новичкам, глядишь, прогресс пойдет в обратную сторону… а там уже и до каменного века недалеко. Вот тогда действительно ни html, ни xhtml никому не будут нужны :-D.
                                                                    Html, так уж получилось, в силу исторических объективных причин был писан мягко говоря «нестандартно». Спустя много лет это уже аксиома. И никаким холиваром тут не пахнет. Если новичок хочет стать грамотным, будет просто вынужден изучать «правила» xhtml (по крайней мере). А то ведь дальше пойдут всякие xml/xsl и прочие ужасы. И тогда амба :-)
                                                                      0
                                                                      Правила XHTML знать надо, никто не спорит, я надеюсь.
                                                                      А вот применять его повсеместно без необходимости — не надо.
                                                                        0
                                                                        по многократным просьбам сделал xhtml
                                                                        • UFO just landed and posted this here
                                                                        +1
                                                                        Я искренне надеюсь, что XHTML канет в лету раньше.
                                                                        • UFO just landed and posted this here
                                                                          –2
                                                                          С такимже успехом можно сказать что «баг» это растояние 3-5 пикселей между строками.
                                                                          Картинки лучше поместить в таблицу.
                                                                            +2
                                                                            Высоту строки лучше задавать однозначно свойством line-height. Потому что в разных браузерах она бывает разной по умолчанию. И будете всегда знать откуда берутся «лишние» растояния между строками.
                                                                              +1
                                                                              В таблицу — это по воробьям з чего то такого большого )
                                                                                +8
                                                                                Картинки лучше поместить в таблицу

                                                                                Жители Хабра приветствуют тебя, гость из прошлого века!
                                                                                0
                                                                                Задавался вопросом в начале своей карьеры верстальщика, почему-то сразу нашел ответ vertcal-align, кто предпочитает bottom, кто top, зависит от конкретного проекта еще. Мне чаще приходится использовать top.
                                                                                За статью спасибо, новичкам пригодится.
                                                                                • UFO just landed and posted this here
                                                                                  +1
                                                                                  На самом деле решений действительно два (о которых мне известно):

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

                                                                                  и мне кажется было бы правильно указать их оба и сообщить, что их применение зависит от задач, так как не всегда можно воспользоваться одним или другим.
                                                                                    0
                                                                                    Причем, для одиноких или позиционированных вправо/влево картинок очень хорошо подходит display:block. А для картинок в тексте отступ убирается отрицательным значением: margin-bottom: -5px или вроде того.
                                                                                    0
                                                                                    не люблю лишние br'ки :)
                                                                                    как правило использую display: block, если надо одну картинку под другой сделать, хотя бывают разные случаи.
                                                                                      +12
                                                                                      да, серьезная тема!
                                                                                      Хотелось бы ещё почитать, что нибудь, вроде «Выравниваем текст по центру» или «Задаём шрифт Вердана» — проблемы по сути не менее актуальные )
                                                                                        –2
                                                                                        да вы ничего не поняли.
                                                                                        не надо читать ничего. на картинке лучше посмотрите. какие красивые. )
                                                                                        –1
                                                                                        У вас очень красивые картинки к посту.
                                                                                          +1
                                                                                          На картинках у тега <img/> не указан обязательный атрибут.
                                                                                            –3
                                                                                            если это xhtml то да, если html — нет
                                                                                              0
                                                                                              А Хабр у нас на чём написан? Ага.
                                                                                              • UFO just landed and posted this here
                                                                                                +1
                                                                                                Если html — то тоже пропущен. Я об alt, если вдруг кто-то не догадался.
                                                                                              0
                                                                                              <br />
                                                                                              нужен, если вдруг CSS не загрузится. А если в вертикальную линеечку 30 штук рисунков будет? Тогда они же без
                                                                                              <br />
                                                                                              горизонтально выстроятся, а это ужас будет, уж поверьте.
                                                                                              • UFO just landed and posted this here
                                                                                                  0
                                                                                                  Вообще, в идеале, XHTML может использоваться и как ресурс с данными. Тогда он очень важен и без CSS. Ведь так много сейчас внимания уделяется «семантической» верстке. В первую очереь, в документе должна быть логика, а уже потом — оформление. Если по логике важны отступы между элементами, они должны быть и без CSS.
                                                                                                +2
                                                                                                <BR/> в форматировании нетекстовых блоков вообще — зло!
                                                                                                • UFO just landed and posted this here
                                                                                                  +2
                                                                                                  Специально для тех, кто не понимает магии. Картиники, как указано выше inline-элемент, и во многом отображаются (и ведут себя) как и текст, то есть на них влияют vertical-align, line-height и прочее. По умолчанию как я понимаю картинка выравнивается по baseline (а это значит не по нижней границе абзаца, а по базвовй линии шрифта — чуть выше), и поэтому уезжает вверх. Сделайте например border-bottom: 1px dashed green; (или outline на норм. браузерах) и подсветите фон блока, в котором они содержатся — и все будет наглядно видно.
                                                                                                    –2
                                                                                                    «Большинство решали это с бубнами» — вы исследование проводили?

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

                                                                                                    P.S. Соблюдайте стандарты, они для того и созданы.
                                                                                                    • UFO just landed and posted this here
                                                                                                      +1
                                                                                                      Возможно повторюсь.

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

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

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

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

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

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

                                                                                                        УЧИТЕСЬ ИСКАТЬ КОРЕНЬ ПРОБЛЕМЫ, А НЕ СРАЗУ ЕЕ РЕШЕНИЕ, тогда все станет намного проще.
                                                                                                        • UFO just landed and posted this here
                                                                                                            0
                                                                                                            Я имел ввиду, что автор не объяснил почему строчный елемент с таким то бейзлайном, отображается с отступом, то есть природу этого явления.

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

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

                                                                                                        Only users with full accounts can post comments. Log in, please.