При просмотре html-кода того или иного ресурса, всегда обращаю внимание на форматирование текста контентной части web-страницы. Что удивительно, в большинстве случаев, многие совершенно не используют возможности «Каскадных таблиц стилей».

Об этом и хочется поговорить.

Что очень часто приходится лицезреть?

Картинка до смешного проста - текст разбит тегами:

<p>Текст...</p>
<p>Много текста...</p>
<p>И снова текст...</p>

И вся эта радость вместо того, чтобы задать для тега <p> в таблице стилей соответствующие поля и отступы:

p {margin:XXpx XXpx;padding:XXpx XXpx;}

приобретает лишенного всякого смысла вид:

<p>Текст...</p><br>
<p>Много текста...</p><br>
<p>И снова текст...</p><br>

Кстати тег <br> может находиться и внутри тега <p> перед его закрывашкой, что в общем-то все равно. Казалось бы ну и что в том особенного, как известно на вкус и цвет...

Но меня заинтересовал другой вопрос, а сколько, же в пикселях на самом деле высота тега <br>?

Эксперимент был проведен тут же, и выяснилось, что высота тега <br> приблизительно составляет 18px.

Осталось решить, как оформить запись для тега <p> в таблице стилей. На самом деле тут есть нюанс, связанный с margin, лучшим оказался такой вариант:

p {margin:0 XXpx;padding:9px 0;}

Попутно было установлено, что один неразрывный пробел, энным количеством которого создают красную строку в параграфе, имеет ширину в 3px.

Оптимальное задание стилей для параграфа может быть таким:

p {margin:0 XXpx;padding:9px 0;text-indent:24px;}

На вопрос, как быть, если на ресурсе есть не один десяток постов и удалять тег <br> после включения в файл стилей предлагаемой записи для <p> в ручную лениво, могу посоветовать попробовать такой трюк:

br {display:none;}

или

p br {display:none;}

Имеет право на жизнь, но надо смотреть, что из этого выйдет :)