resto - ¿Cómo hacer el relleno: trabajo automático en CSS?

input css examples

Question

Estoy trabajando en un proyecto heredado que tiene CSS Reset con *{ margin:0; padding:0 } *{ margin:0; padding:0 } aplicado a todo. Ahora, mi nuevo código no lo necesita, ya que se basa en Normalize.css. Esto no ha sido un gran problema, pero en algunos lugares necesito usar ambos estilos.

¿Cómo desactivo mi CSS? He podido hacer *{margin:auto} que funciona bien. Lo mismo no es cierto sobre el relleno. ¿Hay una manera equivalente de restablecer el relleno. ¿Cómo vas a resolver esto?

Answer 1

La solución soportada más simple es usar margen

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

O use un segundo contenedor alrededor del elemento que tiene este margen aplicado. Esto de alguna manera tendrá el efecto de padding: 0px auto si existiera.

CSS

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

HTML

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

Answer 2

Puede restablecer el relleno (y creo que todo lo demás) con initial a la predeterminada.

p {
    padding: initial;
}

Answer 3

Solo debe colocar su * selector en las áreas específicas que necesitan reinicio. .legacy * { } , etc.

Answer 4

auto no es un valor válido para la propiedad de padding , lo único que puede hacer es eliminar el padding: 0; a partir de la * declaración, de lo contrario, simplemente asigne el padding al bloque de propiedad correspondiente.

Si quitas el padding: 0; a partir de * {} navegador aplicará los estilos predeterminados a sus elementos, lo que le proporcionará compensaciones de posicionamiento cruzado de navegador por pocos píxeles, por lo que es mejor asignar el padding: 0; usando * y que si desea anular el relleno, simplemente use otra regla como

.container p {
   padding: 5px;
}