отступы и отступы - самая несбалансированная вещь среди всего браузера? - PullRequest
2 голосов
/ 22 мая 2010

Хотя некоторые люди используют этот сброс. * { поле: 0; отступы: 0; }

У каждого элемента есть поля по умолчанию и отступы в каждой таблице стилей по умолчанию для браузера (но по-разному)?

В то время как Эрик Мейер собрал некоторые наиболее часто используемые селекторы и передал их всем

{
    margin: 0;
    padding: 0;
    border: 0;
    outline: 0;
    font-size: 100%;
    vertical-align: baseline;
    background: transparent;
}

У этих элементов разные размеры шрифта? другая базовая линия, другой фон, контур и граница?

если мы оставим кроме минусов универсальный селектор.

это

* {
        margin: 0;
        padding: 0;
        border: 0;
        outline: 0;
        font-size: 100%;
        vertical-align: baseline;
        background: transparent;
    }

лучше, чем этот

* {
  margin: 0;
  padding: 0;
}

Ответы [ 3 ]

5 голосов
/ 22 мая 2010

Здесь вы можете найти все стили по умолчанию: CSS2.1 Таблица стилей агента пользователя по умолчанию .

Если вы внимательно изучите список, то вы заметите, что поля для браузера специфичныустанавливаются только для HTML-стандарта block elements , и нигде не задано дополнение для браузера.Другими словами, padding: 0 является излишним.Но на самом деле, margin является наиболее несбалансированным среди браузеров, чтобы ответить на ваш настоящий вопрос.

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

Что касается остатка сброса:

  • border: 0 также является излишним.<hr> и большинство элементов ввода формы являются единственными элементами, имеющими рамку по умолчанию.Без этого <hr> невидим (на самом деле это не работает в IE6 / 7), а элементы ввода текста в форме с тем же цветом фона также невидимы.

  • The outline не следует сбрасывать, это нарушает доступность.Вы должны контролировать его самостоятельно, например, самостоятельно сбрасывать его только по ссылкам с (фоновым) изображением, поскольку это является основной причиной для его сброса.Но все же, это нарушает доступность.Скорее подумайте над тем, чтобы придать ему другой цвет или стиль контура, чтобы он все еще был видимым, но менее тревожным.

  • font-size: 100% заставит вас самостоятельно переопределить их в <h1>,<h2> и т. Д. Элементы.Но даже без перезагрузки вы все равно часто хотели бы сделать это в любом случае.Какой смысл в этом сбросе?

  • vertical-align: baseline; нарушает выравнивание <sub> и <sup>, так что они выглядят как <small>.Кроме того, заголовки таблицы также могут быть затронуты.По умолчанию middle в всех браузерах.Вам нужно будет переопределить их самостоятельно снова .Кроме того, известно, что этот сброс может привести к разрушению IE6 / 7 с изображениями.

  • Значение background: transparent; мне неясно.Я не вижу смысла в этом сбросе, ожидая, что он может свести IE6 / 7 с ума.Вам также необходимо заново определить цвет фона для всех элементов ввода формы, что просто добавляет больше работы (для случая, когда они помещены в цветной контейнер).Я уверен, что всякий раз, когда вы сталкиваетесь с элементом, которому нужен прозрачный фон, вы можете легко определить его самостоятельно и установить его самостоятельно.

Enfin, посмотрите, что вы делаете с этой информацией.Я не мешаю вам использовать сброс CSS.Я сам нашел сброс CSS только полезным> 10 лет назад, когда я только начинал с HTML / CSS.Но с годами я также узнал, что это чепуха.Но я признаю, что это полезно для начинающих, так как сброс заставит их сами устанавливать поля и другие вещи явно .Что вы могли бы сделать так хорошо без сброса.

0 голосов
/ 22 мая 2010

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

Тем не менее, обратите внимание, что у вас может быть много работы впереди вас, когда дело доходит до элементов формы. Они требуют, по крайней мере, границы, чтобы выглядеть хорошо, а некоторые из них (например, кнопки) тоже нуждаются в заполнении. Кроме того, некоторые браузеры по умолчанию отображают трехмерную рамку вокруг кнопок. Если вы установите границу на 0, вы не сможете вернуть этот 3D-вид с помощью CSS.

Также, возможно, вы захотите проверить http://www.blueprintcss.org/. Похоже, что браузеры довольно хорошо выровняются, хотя я сам не пробовал.

0 голосов
/ 22 мая 2010

Ну, «лучше, чем это» трудно сказать, но тот, у кого больше вещей, делает больше.

контур 0 заставляет ссылки не иметь пунктирной границы вокруг них.

Граница 0 создает изображения и не имеет границы вокруг них.

font-size: 100%, вероятно, делает что-то вроде обеспечения шрифтов на 100%.

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

фон: прозрачный предотвращает некоторые проблемы с PNG.

но поля: 0 и отступы: 0 - это два, которые демонстративно не следует исключать из списка сброса.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...