Простой div, содержащий диапазон, не будет правильно задан

Я думал, что хорошо разбираюсь в CSS, но эта простая проблема меня озадачивает.

<div> <span> образец текста </span> </div>

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

Я понимаю, что есть способы использовать "float" для правильного размера div, но поплавки всегда, кажется, приводят к нежелательным побочным эффектам.

Нет ли простого простого способа рассказать размеру div, чтобы он соответствовал его содержимому? Для меня это довольно просто. Может быть, я что-то упустил.

Ответ 1

В базовом случае просто используйте display: inline-block для диапазона.

Вот мой тестовый пример (работает в FF, Chrome и IE 6-8):

<!DOCTYPE HTML>
<html>
<head>
    <title>Span padding test</title>
</head>
<body>
    <div style="background-color: yellow; border: 1px solid red;">
        <span style="padding: 50px; display: inline-block;">test</span>
    </div>
</body>
</html>

Причина, по которой добавление float: left в div и span фиксирует это, заключается в том, что плавающий встроенный элемент неявно преобразует его в элемент блока. Если вы не знакомы с нюансами между div и spans (иначе говоря, между блочными и встроенными элементами), следует прочитать http://www.maxdesign.com.au/articles/inline/.

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

Ответ 2

Добавьте overflow:auto в div.