Урок 16. Ошибки: display и поток документа

📁 Раздел: Блочная модель и позиционирование ⏱️ Время изучения: ~40 мин 🎯 Сложность: Начальная
#display #visibility

⚡ Кратко

Если раскладка выглядит странно — сначала проверьте computed display элемента, потом размеры и отступы.

Типичные ошибки

1. Задают width/height на чистом inline

Как ломается: ширина и высота просто игнорируются — браузер раскладывает элемент по содержимому.

width:160px не сработал 
/* НЕ работает */
span { display: inline; width: 160px; height: 60px; }
/* Правильно: */
span { display: inline-block; width: 160px; height: 60px; }

Как правильно: переключите элемент в inline-block (или block) — тогда размеры применятся.

2. Прячут важный текст через display: none

Как ломается: такой текст исчезает не только визуально, но и из дерева доступности — скринридеры его не прочитают.

⚠️ Проверить по документации (MDN): если контент должен оставаться доступным для скринридеров, не используйте display: none. Для визуального скрытия с сохранением доступности применяют специальный приём «visually hidden» (выход за рамки урока).

3. Строят большие сетки на inline-block

Как ломается: между inline-block-элементами появляются «лишние» пробелы от переносов строк в HTML, а выравнивание становится хрупким.

Как правильно: для сеток и рядов используйте display: flex или display: grid — они дают предсказуемые промежутки (gap) и выравнивание.

4. Не понимают нормальный поток

Как ломается: без понимания, что блоки идут сверху вниз, а строчные — в ряд, любые отступы и «прыжки» элементов кажутся магией.

Как правильно: начните с того, чтобы определить computed display каждого «прыгающего» элемента в DevTools — это объяснит 90% странностей раскладки.