web-dev-qa-db-fra.com

Comment faire du padding: auto work in CSS?

Je travaille sur un projet hérité dans lequel CSS Reset avec *{ margin:0; padding:0 } est appliqué à tout. Maintenant, mon nouveau code n'a pas besoin de ça, car il repose sur Normalize.css. Cela n’a pas posé beaucoup de problèmes, mais à certains endroits, je dois utiliser les deux styles.

Comment désinstaller mon CSS? J'ai pu faire *{margin:auto} qui fonctionne bien. La même chose n'est pas vraie à propos du rembourrage. Existe-t-il un moyen équivalent de réinitialiser le remplissage? Comment allez-vous résoudre ce problème?

csscss-reset
20
Vaibhav Kanwal

auto n'est pas une valeur valide pour la propriété padding. La seule chose à faire est de supprimer le padding: 0; de la déclaration *. Sinon, il suffit d'affecter padding au bloc de propriété correspondant.

Si vous supprimez padding: 0; de * {}, votre navigateur appliquera des styles par défaut à vos éléments, ce qui vous donnera des décalages de positionnement inattendus entre les navigateurs de quelques pixels. Il est donc préférable d'affecter padding: 0; à l'aide de *. règle comme

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

Vous devez simplement définir votre * sélecteur sur les zones spécifiques nécessitant une réinitialisation. .legacy * { }, etc.

3
probablyup

La solution prise en charge la plus simple consiste à utiliser soit la marge

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

Ou utilisez un deuxième conteneur autour de l'élément auquel cette marge est appliquée. Cela aura quelque peu l'effet de padding: 0px auto s'il existait déjà.

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

Vous pouvez réinitialiser le remplissage (et tout le reste) avec initial au paramètre par défaut.

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