Как сделать так, чтобы div не был больше своего содержимого?

Решение заключается в том, чтобы установить для вашего div свойство display: inline-block.

Если вы хотите создать блочный элемент с шириной, которая называется "shrink-to-fit" в CSS, то, к сожалению, спецификация не предоставляет благословленного способа сделать это. В CSS2 "shrink-to-fit" не является целью, а скорее решением для ситуаций, когда браузер "должен" получить ширину из ничего. Такими ситуациями являются:

• плавающие элементы (float)
• абсолютно позиционированные элементы
• элементы со стилем inline-block
• элементы таблицы

если не указана ширина. Я слышал, что в CSS3 планируют добавить такую функциональность. А пока что вам придется использовать один из вышеупомянутых подходов.

Решение не выставлять эту функцию напрямую может показаться странным, но на это есть веская причина. Это затратно. "Shrink-to-fit" подразумевает форматирование как минимум дважды: вы не можете начать форматирование элемента, пока не знаете его ширину, и вы не можете рассчитать ширину, не пройдя через все содержимое. Плюс ко всему, элементы с shrink-to-fit не так уж часто нужны, как может показаться. Зачем вам лишний div вокруг таблицы? Возможно, вам достаточно caption таблицы.

Я думаю, что использование

display: inline-block;

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

Другим решением было бы обернуть ваш div в другой div (если вы хотите сохранить блочное поведение):

HTML:

<div>
    <div class="yourdiv">
        содержимое
    </div>
</div>

CSS:

.yourdiv {
    display: inline;
}

Проблема с тем, что display: inline-block добавляет дополнительный отступ к вашему элементу, может быть решена следующим образом:

Я рекомендую использовать display: table, что идеально подходит для IE8+ и всех современных браузеров:

#element {
    display: table; /* IE8+ и все другие современные браузеры */
}

Бонус: Теперь вы также можете легко центрировать ваш новый элемент #element, добавив margin: 0 auto.

Существует два лучших решения:

1. display: inline-block;

   ИЛИ

2. display: table;

Из этих двух display: table; является более предпочтительным, так как display: inline-block; добавляет лишний отступ.

Для display: inline-block; вы можете использовать метод отрицательных отступов, чтобы устранить дополнительное пространство.