Откуда этот дополнительный пробел между делами?

Question

http://www.lethalmonk6.byethost24.com/index.html

Если вы проверяете с помощью firebug интервал между divами "project-link", между каждым div будет добавлено несколько пикселей.У меня установлено поле на 20 пикселей, и затем добавляются эти маленькие кусочки.Откуда это?

Answer 1

Вы используете display:inline-block, поэтому вы видите там пустое пространство между элементами. Вы можете удалить пробел между div или использовать float: left.

Чтобы уточнить ... если вы используете display: inline-block, сделайте следующее:

<div></div><div></div>

Вместо этого:

<div></div>
<div></div> // White space is added because of the new line

Answer 2

Как сказал Люцифер Сэм, display:inline-block покажет вам пространство между элементами, если оно есть.

Приведенное решение хорошее:

<div></div><div></div>

Но для элементов с большим содержанием я лично предпочитаю, чтобы в этом случае не было пробела между display:inline-block элементами. Вот что я делаю:

   <div>
       large content
   </div><!-- No space
--><div>
       large content 2
   </div>

Answer 3

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

Все, что вам может понадобиться, это просто добавить font-size: 0; в родительский контейнер (вы можете перезаписать это правило для дочерних, чтобы оно не нарушало ваши шрифты).

Итак, вот основной пример:

<div class="font-zero">
    <div class="inline-block"></div>
    <div class="inline-block"></div>
    <div class="inline-block"></div>
</div>

<style>
    .font-zero { font-size: 0; }
    .inline-block { display: inline-block; }
</style>

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

Поскольку эта страница была первым результатом Google, надеюсь, я попаду сюда в следующий раз, когда столкнусь с этой проблемой и забуду о том, что легко исправить ... И, возможно, это будет полезно и для кого-то еще:)

Answer 4

Как сказал Терминал Фрост, добавьте float: left к классу и удалите display: inline-block. Кроме того, добавьте content: "." к родительскому контейнеру div, чтобы устранить проблему с переносом.