Как сделать заполнение: авто работать в CSS?

Я работаю над старым проектом с CSS Reset с *{ margin:0; padding:0 }, применяемым ко всему. Теперь мой новый код не нуждается в этом, поскольку он полагается на Normalize.css. Это не было большой проблемой, но в некоторых местах мне нужно использовать оба стиля.

Как отключить мой CSS? Я смог сделать *{margin:auto}, который отлично работает. То же самое относится и к прописке. Есть ли эквивалентный способ для Reset заполнения. Как вы решаете это?

Ответы

Ответ 1

auto не является допустимым значением для свойства padding, единственное, что вы можете сделать, это вынуть padding: 0; из объявления *, иначе просто присвойте padding соответствующему блоку свойств.

Если вы удалите padding: 0; из * {}, чем браузер будет применять стили по умолчанию к вашим элементам, что даст вам неожиданные смещения смещения браузера на несколько пикселей, поэтому лучше назначить padding: 0; с помощью *, а затем если вы хотите переопределить заполнение, просто используйте другое правило, например

.container p {
   padding: 5px;
}

Ответ 2

Вы должны просто указать свой селектор * на конкретные области, которым требуется reset. .legacy * { } и т.д.

Ответ 3

Самое простое поддерживаемое решение - либо использовать margin

.element {
  display: block;
  margin: 0px auto;
}

Или используйте второй контейнер вокруг элемента, который применяет этот марж. Это будет несколько влиять на padding: 0px auto, если оно действительно существует.

CSS

.element_wrapper {
  display: block;
  margin: 0px auto;
}
.element {
  background: blue;
}

HTML

<div class="element_wrapper">
  <div class="element">
    Hello world
  </div>
</div>