2

Вот заметил одну вещь:
1. имеем простой тег img
2. если вставить в строку два тега с бордером=0, то они будут впритык друг к другу. Пример:

    <img src="pict.jpg"><img src="pict.jpg">
  1. А если разделить энтером

    <img src="pict.jpg">
    <img src="pict.jpg">
    

то между ними появляется пробел ровно в 3 px.
Почему происходит такое странное явление, ведь энтер неотображаемый символ.

3 ответа 3

12

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

   <img src="pict.jpg"><!--
--><img src="pict.jpg">
1
  • Спасибо! Гениально! :) Это уже из разряда хаков.
    – I_CaR
    17 дек 2012 в 19:23
4

Давайте, попробую рассказать с другой стороны img - очень интересный тэг; ведёт себя одновременно как блок и как строка. если родительскому элементу прописать css правило line-height:0;, вертикального пробела не будет

1
  • Как-то не сработало на img
    – I_CaR
    9 июн 2013 в 5:36
1

Вообще, img - это инлайновый (строковый) элемент, поэтому он и ведет себя как простой текст. Если написать элементы img без пробела/переноса строки, то изображения будут идти впритык друг к другу.

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

  1. img { float: left; }

  2. для родительского элемента задать: word-spacing: 0;

  3. воспользоваться комментариями, как посоветовал @knes.

Удачи

1
  • Спасибо, на досуге попробую.
    – I_CaR
    9 июн 2013 в 12:00

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.