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

Скажем, у меня есть несколько встроенных тегов div, например

<div class="image">

</div>
<div class="image">

</div>

class image просто задает размер 100x100 и серый цвет фона. Их поля и границы установлены на 0, но между двумя прямоугольниками есть расстояние.

Однако если я напишу такой HTML-код:

<div class="image">

</div><div class="image">

</div>

Удалив все пробелы между div, интервал исчезнет.

Поскольку я не хочу писать свой HTML таким образом, я думаю, что должен быть способ удалить пробелы с помощью CSS. Меня не волнует, удалены ли пробелы, скрыты или уменьшены, если их видимость удалена.

Спасибо за любую помощь

По запросу JSFiddle: http://jsfiddle.net/6h3Jx/

Обновлено с интервалом между словами: http://jsfiddle.net/6h3Jx/1/


html css whitespace inline block
person Hubro    schedule 18.01.2011    source источник
comment
Это странно, у вас есть живой пример? Кроме того, в каком браузере вы тестируете?   -  person Kyle    schedule 18.01.2011
comment
это не должно происходить так, как вы сказали... можете ли вы сделать пример jsfiddle   -  person kobe    schedule 18.01.2011
comment
Обновленный вопрос со ссылкой JSFiddle   -  person Hubro    schedule 18.01.2011
comment
@ josh-crozier Извините, но как это дубликат, когда этот вопрос на два года старше?   -  person Hubro    schedule 02.09.2014

Ответы (3)


arrow_upward
1
arrow_downward

это поведение встроенного элемента, поэтому попробуйте плавать влево. http://jsfiddle.net/aVrSx/

person kuyabiye    schedule 18.01.2011
comment
Я не могу одновременно плавать влево и центрировать элемент. По крайней мере, я не понял, как - есть идеи? - person Hubro; 18.01.2011
comment
вы хотите, чтобы эти элементы были сосредоточены в контейнере? - person kuyabiye; 18.01.2011
comment
Я хочу, чтобы они были центрированы и переходили на следующую строку, если элементы превышают ширину контейнера. Идеальная задача для встроенного блока :) - person Hubro; 18.01.2011

arrow_upward
1
arrow_downward

вы можете установить «display: flex;» атрибут их родительской оболочки:

.flexbox {
  display: -webkit-box;      /* OLD - iOS 6-, Safari 3.1-6 */
  display: -moz-box;         /* OLD - Firefox 19- (buggy but mostly works) */
  display: -ms-flexbox;      /* TWEENER - IE 10 */
  display: -webkit-flex;     /* NEW - Chrome */
  display: flex;             /* NEW, Spec - Opera 12.1, Firefox 20+ */
}
person user2711081    schedule 05.02.2014

arrow_upward
0
arrow_downward

поместите следующее в родительский элемент:

word-spacing:-4px;

Или попробуйте:

font-size:0px;

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

person Ivan    schedule 18.01.2011
comment
Это абсолютно ничего не дало :-) - person Hubro; 18.01.2011
comment
да, я забыл про интервал между словами: 0; является значением по умолчанию. -4px должно помочь. Однако на это повлияет изменение размера текста, поэтому я добавил второе решение в свой ответ. - person Ivan; 18.01.2011
comment
Есть ли также значение, которое помешало бы font-size:0px; от наследования вниз по иерархии? РЕДАКТИРОВАТЬ: Независимо от того, решение для размера шрифта не работает: jsfiddle.net/6h3Jx/1 - person Hubro; 18.01.2011
comment
нет, единственным решением будет что-то вроде .nowhitespace{font-size:0px;} nowhitespace › * { font-size:12px;} - person Ivan; 18.01.2011