Используйте CSS, чтобы обнулить ваши поля и границы

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

Нормализация значений полей и заполнения

Лучший способ решить проблему несовместимой блочной модели - установить все поля и значения заполнения элементов HTML равными нулю. Есть несколько способов сделать это - добавить это правило CSS в таблицу стилей:

Несмотря на то, что это правило не является конкретным, поскольку оно находится во внешней таблице стилей, оно будет иметь более высокую специфичность, чем значения браузера по умолчанию. Поскольку эти значения по умолчанию - это то, что вы перезаписываете, этот единственный стиль выполнит то, что вы собираетесь делать.

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

Используйте CSS для нормализации границ

Старшая версии Internet Explorer имел прозрачную или невидимую рамку вокруг элементов. Если вы не установите границу на 0, эта граница может испортить макеты вашей страницы. Если вы решили, что продолжите поддерживать эти устаревшие версии IE, вам нужно будет решить эту проблему, добавив следующие элементы в стили body и HTML:

HTML, body {
маржа: 0px;
отступ: 0 пикселей;
 граница: 0px;
}

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

Почему согласованные поля и границы имеют значение в веб-дизайне

Сегодняшний веб-браузер прошел долгий путь от безумных дней, когда любая кросс-браузерная согласованность выдавали желаемое за действительное. Современные веб-браузеры полностью соответствуют стандартам. Они прекрасно сочетаются друг с другом и обеспечивают довольно согласованное отображение страниц в различных браузерах. Это включает в себя последние версии Google Chrome, Microsoft Edge, Mozilla Firefox, Opera, Safari и различные браузеры, найденные набесчисленное множество мобильных устройств доступ к веб-сайтам сегодня.

Хотя, безусловно, был достигнут прогресс в том, как браузеры отображают CSS, все еще существуют несоответствия между этими различными вариантами программного обеспечения. Одна из распространенных несоответствий заключается в том, как эти браузеры по умолчанию вычисляют поля, отступы и границы.

Поскольку эти аспекты блочной модели влияют на все элементы HTML, и поскольку они важны при создании страницы макеты, непоследовательное отображение означает, что страница может отлично выглядеть в одном браузере, но выглядеть немного неаккуратно в Другой. Чтобы решить эту проблему, многие веб-дизайнеры нормализуют эти аспекты блочной модели. Эта практика также известна как обнуление значения полей, набивка, и границы.

Примечание о настройках браузера по умолчанию

Каждый веб-браузер устанавливает настройки по умолчанию для определенных аспектов отображения страницы. Например, гиперссылки по умолчанию выделены синим цветом и подчеркнуты. Это поведение одинаково для разных браузеров, и хотя большинство дизайнеров меняют его в соответствии с дизайном. потребности их конкретного проекта, тот факт, что все они начинают с одних и тех же значений по умолчанию, упрощает выполнение этих изменения. К сожалению, значения по умолчанию для полей, отступов и границ не обладают таким же уровнем согласованности между браузерами.