Перед началом работы давайте уберем те стили, которые мы давали элементам списка. В таблице стилей давайте уберем блок который отвечал за золотистый цвет тегов li.
Остальное можно оставить.
Теперь переходим к блочной модели в CSS. Что такое блочная модель и почему это так важно. На самом деле каждый тег для браузера это блок, который занимает всю доступную ему ширину.
Давайте начнем с заголовка. Давайте вернем рамку для заголовка первого уровня. Давайте допишем ему рамку например 3 пикселя сплошную и золотистого цвета.
border: 3px solid #FAA21A;
Смотрим что получилось в браузере. Мы видим что рамка окантовывает не текст а все пространство которое дает браузер. Вот здесь и кроется весь секрет.
Остальное можно оставить.
Теперь переходим к блочной модели в CSS. Что такое блочная модель и почему это так важно. На самом деле каждый тег для браузера это блок, который занимает всю доступную ему ширину.
Давайте начнем с заголовка. Давайте вернем рамку для заголовка первого уровня. Давайте допишем ему рамку например 3 пикселя сплошную и золотистого цвета.
border: 3px solid #FAA21A;
Смотрим что получилось в браузере. Мы видим что рамка окантовывает не текст а все пространство которое дает браузер. Вот здесь и кроется весь секрет.
