Hoe kan padding:auto werken in CSS?

Ik werk aan een verouderd project met CSS Reset met *{ margin:0; padding:0 }toegepast op alles. Nu heeft mijn nieuwe code dat niet nodig omdat het afhankelijk is van Normalize.css. Dit was niet echt een probleem, maar op sommige plaatsen moet ik beide stijlen gebruiken.

Hoe kan ik de reset van mijn CSS ongedaan maken? Ik heb *{margin:auto}kunnen doen, wat prima werkt. Hetzelfde geldt niet voor opvulling. Is er een gelijkwaardige manier om de opvulling opnieuw in te stellen. Hoe los je dit op?

Antwoord 1, autoriteit 100%

autois geen geldige waarde voor de eigenschap padding, het enige dat u kunt doen is padding: 0;uit de *declaratie, anders wijs eenvoudig paddingtoe aan het respectievelijke eigenschappenblok.

Als u padding: 0;uit * {}verwijdert, dan past de browser standaardstijlen toe op uw elementen, waardoor u onverwachte verschuivingen in de positionering in verschillende browsers van enkele pixels krijgt, dus het is beter om padding: 0;toe te wijzen met behulp van *en als je de opvulling wilt overschrijven, gebruik dan gewoon een andere regel zoals

.container p {
   padding: 5px;
}

Antwoord 2, autoriteit 7%

U moet uw * selector alleen richten op de specifieke gebieden die opnieuw moeten worden ingesteld. .legacy * { }, enz.

Antwoord 3, autoriteit 7%

De eenvoudigste ondersteunde oplossing is om ofwel marge te gebruiken

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

Of gebruik een tweede container rond het element waarop deze marge is toegepast. Dit heeft enigszins het effect van padding: 0px autoals het bestond.

CSS

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

HTML

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

Antwoord 4

Je kunt de opvulling (en ik denk al het andere) resetten met initialnaar de standaard.

p {
    padding: initial;
}

Antwoord 5

Als het je doel is om ALLES te resetten, dan zou het antwoord van @Björn je doel moeten zijn, maar toegepast als:

* {
  padding: initial;
}

als dit wordt geladen na uw oorspronkelijke reset, zou css hetzelfde gewicht moeten hebben en afhankelijk zijn van de standaardopvulling van elke browser als initiële waarde.