Правильный синтаксис разметки HTML? (для удаления пробелов между элементами встроенного блока)

Когда html-код не "украшен", он выглядит как

<div><img src="img1.jpg"/><img src="img2.jpg"/></div>

И затем эти изображения отображаются как

|=||=| //no gap between

Но после beautifier http://ctrlq.org/beautifier/

<div>
    <img src="img1.jpg"/>
    <img src="img2.jpg"/>
 </div>

Они отображаются таким образом

|=| |=| // gap (space) between

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

(вложенные могут быть четными элементами "block" ), поэтому я не знаю, как писать код, который может быть легко читаемым и отображаемым человеком (без пробелов между встроенными элементами, по крайней мере).

Любые предложения? =)

Ответы

Ответ 1

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

Вариант 1: левые поплавки

Вот учебник по поплавкам в целом: http://css.maxdesign.com.au/floatutorial/ Настоятельно рекомендуется, чтобы все разработчики интерфейсов хорошо разбирались в этом вопросе.

Вариант 2: вложенные комментарии (уже отправлены)

<div>
    <img src="img1.jpg"/><!-- 
 --><img src="img2.jpg"/>
</div>

Вариант 3 (потенциально в будущем): text-space-collapse: discard; (ранее white-space-collapse: discard;)

Свойство CSS white-space-collapse не рекомендуется из-за плохого использования браузером (см. комментарий ниже). Похоже, что это свойство больше не является частью спецификации оформления текста. Я также нашел ссылку на text-space-collapse как рассматриваемую в будущем.

Вариант 4: не пытайтесь

Вы не можете ожидать наличия красивого кода при использовании дисплея: встроенный блок. Я считаю, что ваше использование встроенного блока и желание красивого кода являются взаимоисключающими без использования float: left.

Вариант 5: добавьте font-size: 0 к родительскому элементу. По-видимому, это не работает с Safari, поэтому решение имеет аналогичное значение white-space-collapse: discard;.

Ответ 2

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

<div>
    <img src="img1.jpg"/><!-- 
 --><img src="img2.jpg"/>
</div>

<!-- - тег комментария, который будет игнорироваться браузерами.

Ответ 3

Я знаю, что меня будут ненавидеть за это. Buuuuut....

Если вы хотите разместить свой img точно рядом друг с другом И иметь "украшенный" код, вам нужно использовать таблицу.

Cue screaming

С помощью css вы можете делать все, что хотите, с 2 img в div, за исключением того, что они точно подобны таблице.

Этот код....

<div>
    <table cellspacing="0" cellpadding="0">
        <tr>
            <td>
                <img src="img1.jpg"/>
            </td>
            <td>
                <img src="img2.jpg"/>
            </td>
        </tr>
    </table>
</div>

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

Релевантная скрипка http://jsfiddle.net/t4Krs/

Ответ 4

Это не очень, но это красивее, чем комментарий трюк на мой взгляд:

<div>
  <
   img src="img1.jpg"/><
   img src="img2.jpg"
  >
</div>