Как чинить вёрстку

Во время написания своих стилей часто возникает ситуация, что стиль почему-то не работает или работает не так, как хотелось. В этой статье будут разобраны 3 случая с поломанной вёрсткой, советы из которых вы сможете применить в своих проектах.

1. Красный или не красный?

То, что вы написали какой-то стиль ещё не значит, что это получилось правильно, и браузер вас понял.

1.1. Скопируйте вёрстку

Создайте файл index.html, скопируйте туда вёрстку и откройте в браузере. Это небольшой сайт, на котором должен быть красный текст:

<html lang="ru">
  <head>
  </head>
  <body>
    <p style="color red">Красный текст</p>
  </body>
</html>

Текст на сайте почему-то не красный:

1.2. Откройте Chrome Dev Tools

Разглядывать HTML-код и искать в нём ошибку — долго и нудно. Лучше сразу обратиться к браузеру и узнать у него, что ему не понравилось. У браузера можно узнать, какие стили браузер понял, а какие — пропустил. Это можно сделать через панель отладки стилей в Chrome Dev Tools.

Откройте инструменты разработчика в браузере, перейдите в панель стилей:

Почему-то стиль про “красный цвет” зачёркнут… Видимо, он не работает. Если присмотреться, можно увидеть, что у всех остальных стилей название слева от двоеточия, а значение — справа:

display: block;
margin-block-start: 1em;
margin-block-end: 1em;

А вот у стиля красного цвета всё слева:

color red:

Да и браузер уже подсказывает в чём дело. Нет стиля color red, есть стиль color, а red — его значение:

1.3. Исправьте ошибку

Ошибку можно исправить прямо в браузере. Кликните на стиль и перепишите его:

Теперь текст красный:

2. Хотел красный — получил синий.

Иногда в стиле ошибки нет, но браузер всё равно его не отрисовывает: во всём вина другого стиля, который мешает.

2.1. Скопируйте вёрстку

Создайте файл index.html, скопируйте туда вёрстку и откройте в браузере. Это ещё один сайт, на котором должен быть красный текст:

<html lang="ru">
  <head>
    <style type="text/css">
        .blue {
            color:blue;
        }
    </style>
  </head>
  <body>
    <div style="color:red;">
        <p class="blue">Красный текст</p>
    </div>
  </body>
</html>

На этот раз вместо желанного красного он почему-то синего цвета:

2.2. Откройте Chrome Dev Tools

В примере выше ошибку найти легко, но вам не всегда будет так везти. Посмотрите как её можно найти с помощью панели отладки стилей:

На панели видно, что красный стиль зачёрнут, а синий — нет. Похоже, что стиль синего цвета перезаписал красный цвет.

Выключите синий цвет, чтобы проверить, что красный работает:

2.3. Исправьте ошибку

Чтобы её исправить, найдите, откуда взялся стиль красного цвета. К счастью, Chrome Dev Tools подсказывает и это. Дело в классе blue на теге. Исправьте ошибку и обновите страницу:

3. Неправильные отступы

Для каждого тега Chrome Dev Tools предлагает посмотреть все его размеры и отступы, они изображены схематично:

3.1. Скопируйте вёрстку

Создайте файл index.html, скопируйте туда вёрстку и откройте в браузере. На этот раз хочется сделать так, чтобы текст снизу очень-очень прижался к тексту выше. В коде даже убрали все отступы: margin:0px;:

<html lang="ru">
  <head>
  </head>
  <body>
    <div>
        <p>Чёрный текст</p>
        <p style="margin:0px;">Очень прижавшийся снизу текст</p>
    </div>
  </body>
</html>

Но текст всё равно и близко не хочет прижиматься:

3.2. Откройте Chrome Dev Tools

Размеры элементов тоже можно посмотреть во вкладке Styles. Синий прямоугольник — размеры самого элемента. Оранжевая рамка — отступы снаружи, margin. Зелёная рамка — отступ внутри, padding. Подробнее об отступах.

Откройте вкладку Styles и посомтрите на размеры элемента и соседних элементов:

На гифке видно, что дело не в отступе у нижнего текста, а в отступе у верхнего. На его диаграмке нарисована оранжевая рамка, внизу у которой написано 16. Это значит, что у этого блока есть margin в 16 пикселей внизу:

3.3. Исправьте ошибку

Исправить ошибку можно дописав стиль прямо в Chrome Dev Tools:

Попробуйте бесплатные уроки по Python

Получите крутое код-ревью от практикующих программистов с разбором ошибок и рекомендациями, на что обратить внимание — бесплатно.

Переходите на страницу учебных модулей «Девмана» и выбирайте тему.

Хочу код-ревью