Почему справа от моего DIV появляется крошечный отступ?

Question

У меня большой DIV шириной 586 пикселей. Внутри этого есть два небольших DIV, ширина 266 пикселей.

При предварительном просмотре страницы между ними есть небольшое поле. Я пытался устранить неисправность с помощью Inspect Element, но не нашел никаких дополнительных полей в метриках.

CSS:

#category-results { width: 586px; height: 1000px; background-color: fuchsia; }

.category-item-full { height: 158px; width: 266px; background-color: green; position: relative; display: inline-block; margin: 0px; }

HTML:

<div id="category-results">

                    <div class="category-item-full">
                    </div>

                    <div class="category-item-full">
                    </div>

</div>

Answer 1

Удалите display: inline-block; в вашем CSS.
Или, если вам это нужно, удалите пробелы между <div> с в HTML:

<div class="category-item-full">
</div><div class="category-item-full">
</div>

Answer 2

Это потому, что у вас есть пустое пространство между вашими div.Затянуть их, и это уходит. Пример jsFiddle .

Answer 3

Попробуйте избавиться от display: inline-block и заменить на float: left. Кажется, работает, и является стандартным CSS в отличие от "inline-block".

Answer 4

Попробуйте сброс CSS. Вот вам для начала: Инструменты CSS: Сброс CSS . И не стесняйтесь гуглить прочь "Сброс CSS". Наконец, tuts + network очень полезен.