Почему между тегами img есть разрыв?

Question

Почему между тегами img есть разрыв?

0

HTML

<div id="home_header_minitab">
                    <img src="topnavi_1.gif" />
                    <img src="topnavi_2.gif" />
                    <img src="topnavi_3.gif" />
                    <img src="topnavi_4.gif" />

</div>

CSS

#home_header_minitab{
    width: 100%;
    float: right;
    text-align: right;
}

и результат,

Если я удаляю float и text-align, он печатает отлично. но если я добавлю это два, это будет выглядеть так. но требование состоит в том, чтобы найти изображения с правой стороны. :(

Если я ошибаюсь, я буду признателен, если будет лучший способ распечатать изображения прямо.

Canna 04 дек. 2013, в 08:13

Источник

0

Вы пробовали разместить все теги img в одной строке?
Lawrence 04 дек. 2013, в 06:48
0

@Lawrence Лавренс, боже мой! оно работает!
Canna 04 дек. 2013, в 06:50
0

jsfiddle.net/g8wyE
biziclop 04 дек. 2013, в 06:52

Показать ещё 1 комментарий

Теги:

html

css

2 ответа

4

Замененные встроенные элементы обрабатываются так же, как символы.

Между тем <img> <img> существует пробел по той же причине, что между aa существует пробел.

Удалите пробелы между элементами из HTML.

Quentin 04 дек. 2013, в 05:03

Ещё вопросы

Вы пробовали разместить все теги img в одной строке?
@Lawrence Лавренс, боже мой! оно работает!

poke · Accepted Answer · 2013-12-04T05-44-00.000Z

Если не указано иное, пробелы в HTML обычно сворачиваются в одно пространство. Таким образом, в вашем коде есть фактически пространство между изображениями.

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

Обычно существует два способа решить эту проблему, не заменяя встроенный макет самим (например, используя поплавки). Первый способ - просто избавиться от любых пробелов между элементами в HTML. Это самое простое и эффективное решение.

Другим решением было бы изменить размер шрифта на ноль, поэтому пространство фактически не имеет самого размера:

#home_header_minitab {
    font-size: 0;
}

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