простое отделение, содержащее промежуток, не измерит правильно
Я думал, что был довольно хорошо осведомлен о CSS, но эта простая проблема экранирует меня.
<отделение> <промежуток> демонстрационный текст </промежуток> </отделение>
результаты в высоте отделения, являющейся меньшим, чем высота промежутка, если промежуток имеет дополнение.
Я понимаю, что существуют способы использовать "плавание" для создания размера отделения правильно, но плавания всегда, кажется, представляют нежелательные побочные эффекты.
Нет ли чистый простой способ сказать отделению размеру соответствовать своему содержанию? Кажется довольно основным мне. Возможно, я пропускаю что-то.
2 ответа
В базовом случае просто используйте 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 исправляет это, заключается в том, что плавающий встроенный element неявно преобразует его в блочный элемент. Если вы не знакомы с нюансами между div и spans (то есть разницей между блочными и встроенными элементами), прочтите http://www.maxdesign.com.au/articles/inline/ .
Есть несколько других способов решить эту проблему, но трудно сказать, какой из них лучше, не зная больше об остальной разметке и стилях.