it-swarm.com.ru

Как сделать padding: авто работать в CSS?

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

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

20
Vaibhav Kanwal

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

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

.container p {
   padding: 5px;
}
21
Mr. Alien

Вы должны просто настроить селектор * на конкретные области, которые требуют сброса. .legacy * { } и т. д.

3
probablyup

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

.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>
2
Adam Grant

Вы можете сбросить заполнение (и я думаю, что все остальное) с initial по умолчанию.

p {
    padding: initial;
}
0
Björn Tantau