Dans CSS, la principale différence entre la marge et le rembourrage est qu'elles affectent différentes parties du modèle de bo?te. 1. La marge contr?le l'espace à l'extérieur de la bordure de l'élément, qui est utilisée pour ajuster la distance entre l'élément et d'autres éléments; 2. Le rembourrage contr?le l'espace à l'intérieur de la bordure de l'élément, qui est utilisé pour ajuster la distance entre le contenu et la bordure. Par exemple, paramètre .box {margin: 20px; } créera un espace externe 20px autour de l'élément, tout en définissant .box {padding: 15px; } créera un espace interne 15px entre le contenu et la bordure. Dans les scénarios d'utilisation, si vous souhaitez séparer les blocs ou les éléments centraux, utilisez la marge; Si vous souhaitez ajouter de l'espace au texte dans le bouton ou développer la zone d'arrière-plan, utilisez le rembourrage. Les deux peuvent également être utilisés en combinaison, tels que la définition de l'espacement intérieur et extérieur pour les composants de la carte en même temps. Après avoir compris le modèle de bo?te, il sera plus naturel de choisir une marge ou un rembourrage.

La différence entre margin et padding dans CSS se résume à la partie du modèle de bo?te qu'ils affectent. En bref: la marge est à l'extérieur de la bordure, le rembourrage est à l'intérieur .

Décomposons-le en termes pratiques que vous pourriez réellement utiliser lors de la création de dispositions.

Quelle margin fait

Margin contr?le l'espace à l'extérieur de la bordure d'un élément - fondamentalement, la quantité d'espace qu'elle prend sur la page par rapport aux autres éléments.

• Si vous voulez que deux bo?tes soient espacées les unes des autres, vous ajusteriez généralement leurs marges.
• Les marges peuvent s'effondrer (en particulier les plus haut et les bas), ce qui est un comportement qui surprend souvent de nouveaux développeurs.
• Vous pouvez définir des c?tés individuels ( margin-top , margin-right , etc.) ou utiliser un raccourci comme margin: 10px 20px; .

Exemple:

 .bo?te {
  marge: 20px;
}

Cela signifie qu'il y aura 20 pix d'espace autour des quatre c?tés de .box entre elle et les éléments voisins.

Ce que fait padding

Padding affecte l'espace à l'intérieur de l'élément - entre le contenu et la bordure.

• Le rembourrage augmente la taille de l'élément lui-même.
• Il affecte la couleur ou les images d'arrière-plan - celles-ci s'étendront dans la zone de rembourrage.
• Le rembourrage ne s'effondre pas comme les marges.

Exemple:

 .bo?te {
  rembourrage: 15px;
}

Cela pousse le contenu à l'intérieur de la bo?te à 15px des bords, ce qui rend la bo?te visuellement plus grande.

Visualiser la différence

Pensez à un cadre photo:

• Le contenu est la photo à l'intérieur.
• Le rembourrage est l'accouplement autour de la photo.
• La bordure est le cadre réel.
• La marge est à quelle distance tout le cadre se trouve des autres cadres sur le mur.

Donc:

• Utilisez padding si vous voulez plus de respirer à l'intérieur de la bo?te.
• Utilisez margin si vous souhaitez repousser d'autres éléments de la case.

Quand en utiliser l'un sur l'autre

Voici quelques scénarios du monde réel:

Utilisez margin lorsque:

• Vous souhaitez séparer les blocs les uns des autres.
• Vous centrez un élément avec margin: 0 auto; .
• Vous avez besoin d'espacement négatif (par exemple, tirez un élément à gauche ou à droite).

Utilisez padding lorsque:

• Vous souhaitez créer de l'espace autour du texte à l'intérieur d'un bouton.
• Vous ajustez l'espacement sans affecter les éléments adjacents.
• Vous voulez que les couleurs de fond ou les bordures incluent l'espace supplémentaire.

Parfois, les deux sont utilisés ensemble - par exemple, donnant à un composant de carte un espacement interne avec rembourrage et espacement externe avec marge.

C'est l'idée de base. Une fois que vous êtes à l'aise de voir le modèle de bo?te dans votre esprit, le choix entre la marge et le rembourrage devient une seconde nature.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!