Comment utiliser le remplissage en CSS?

Vous pouvez utiliser différents types de variables en combinaison les uns avec les autres
Vous pouvez utiliser différents types de variables en combinaison les uns avec les autres, par exemple padding: 10px 2em;*.

Le remplissage est la quantité d'espace qui se trouve entre le bord d'un élément et le contenu à l'intérieur de cet élément. Il est lié mais pas identique à la marge, qui est la distance entre le bord d'un élément et les éléments qui l'entourent.

Méthode 1 sur 2: ajouter un rembourrage spécifique aux côtés

  1. 1
    Sélectionnez l'élément sur lequel vous souhaitez ajouter un rembourrage. Pour cela, vous voudrez connaître la classe ou l'ID, idéalement. Par exemple, .wrapper ou #header.
  2. 2
    Ajoutez la quantité de rembourrage que vous souhaitez ajouter à l'aide de l'une des options suivantes:
    • padding-left
    • padding-right
    • padding-top
    • padding-bottom
  3. 3
    Fixez le montant. Comme pour toute déclaration de distance ou de taille, la distance peut être indiquée en:
    • px
    • em
    • %
    • vw
    • vh
    Ajoutez la quantité de rembourrage que vous souhaitez ajouter à l'aide de l'une des options suivantes
    Ajoutez la quantité de rembourrage que vous souhaitez ajouter à l'aide de l'une des options suivantes.
  4. 4
    Vérifiez votre code pour les erreurs de syntaxe. Une option correcte par exemple est la suivante: donnez à notre élément un espacement de 20 pixels à droite:
    • .wrapper #header {padding-right: 20px;}

Méthode 2 sur 2: rembourrage sténographique

  1. 1
    Sélectionnez l'élément sur lequel vous souhaitez ajouter un rembourrage.
  2. 2
    Utilisez lapadding: commande;. Il peut être utilisé avec 2 ou 4 variables:
    • rembourrage: haut/bas gauche/droite;
    • rembourrage: en haut à droite en bas à gauche;

Conseils

  • Vous pouvez utiliser différents types de variables en combinaison les uns avec les autres, par exemple padding: 10px 2em;*
  • Essayez de ne pas combiner un rembourrage spécifique à un côté et à une ligne; il est plus difficile de voir la structure de votre code
  • Apportez vos modifications à la coutume. css et de préférence pas styles.css

FacebookTwitterInstagramPinterestLinkedInGoogle+YoutubeRedditDribbbleBehanceGithubCodePenWhatsappEmail