Есть несколько элементов HTML, в которых почти нет смысла без использования CSS. И один из таких элементов — элемент блока. Это, возможно, наиболее неправильно понимаемый и неуместно используемый элемент в спецификации HTML5, так что давайте разберемся с часто встречающимися примерами его неправильного использования:

• Блок — это контейнер, который применяется, только если все остальные элементы не подходят.

• В коде CSS все свойства, которые можно задать элементу блока, можно задать и любым другим элементам. Элемент блока не отличается от других элементов в этом смысле. Не нужно использовать элемент блока, чтобы применять современные свойства CSS, такие как, например, расположение.

• Элемент блока почти никогда не должен содержать в себе только один элемент. Так как все, что можно использовать для стилизации блока, можно использовать и в задании стилей другим элементам, размещение одиночного элемента в элементе блока почти всегда избыточно и необязательно.

• Элемент блока — не замена и не добавление к блочным элементам или элементам разделов. Например, у ненумерованного списка уже есть родительский элемент. Размещение его в элементе блока излишне.

• Необязательно добавлять блок, чтобы создать дополнительную рамку вокруг элемента. Вместо этого можно использовать сочетание свойств контура и тени блока.

• Избегайте задавать высоту элементам блоков. Фактически, избегайте задавать высоту любым элементам, кроме элементов изображений. За исключением случаев использования высоты 100%, лучше позволить элементам блоков растянутся на нужную им высоту, зависящую от их содержимого.

Автор урока Dudley Storey

Перевод — Дежурка

Смотрите также:

• Использование селектора only-of-type
• Использование единиц измерения vw и vh в создании современных сайтов
• Использование media queries CSS