Comment définir les marges et le rembourrage CSS, et les astuces de disposition cool 'Data-Gatsby-head =' true '/> <meta propriété =' Twitter: account_id 'Content =' 15743570 'Data-Gatsby-head = & q-tutoriel CSS-php.cn

Ce tutoriel clarifie la distinction entre les marges CSS et le rembourrage, illustrant leur impact sur l'espacement des éléments de page Web. Nous explorerons l'effondrement de la marge, les implications de diverses unités dans la conception réactive, et nous terminer avec des techniques de mise en page de marge et de rembourrage CSS.

Concepts clés:

Le modèle de boîte CSS est fondamental: les éléments sont des boîtes rectangulaires définies par le contenu, le rembourrage, la bordure et la marge.
box-sizing confond souvent les débutants. La valeur par défaut box-sizing: content-box ajoute le rembourrage et les bordures à la largeur et à la hauteur de l'élément. box-sizing: border-box est une solution courante, garantissant le rembourrage et les bordures sont incluses dans la largeur et la hauteur spécifiées.
CSS contrôle précisément le rembourrage et la marge sur les quatre côtés d'un élément. Le rembourrage entoure le contenu; La marge est la couche externe, créant un espace entre l'élément et ses voisins.
Les marges et le rembourrage offrent des applications polyvalentes: éléments centrés, des éléments d'espacement et maintien des rapports d'aspect de l'image. La maîtrise de ces techniques résout de nombreux défis de mise en page.

Comprendre le modèle de boîte CSS:

Les éléments CSS sont des boîtes rectangulaires composées de:

Contenu
padding
Border
marge

Le contenu réside de manière centralisée; Le rembourrage renforce le contenu; Les frontières entourent le rembourrage; et la marge forme la couche la plus externe.

How to Set CSS Margins and Padding, and Cool Layout Tricks

Le dimensionnement de la boîte CSS a expliqué:

box-sizing est une source fréquente de confusion. Deux éléments de largeur de 50% pourraient ne pas correspondre à leur conteneur en raison du rembourrage et des bordures supplémentaires.

La valeur par défaut box-sizing: content-box augmente la largeur globale de l'élément lorsque le rembourrage ou les bordures sont ajoutés. box-sizing: border-box simplifie la disposition en incluant le rembourrage et les bordures dans la largeur spécifiée. De nombreuses réinitialités CSS utilisent border-box pour tous les éléments:

html {
  box-sizing: border-box;
}
*, *:before, *:after {
  box-sizing: inherit;
}

Copier après la connexion

(Remarque: Des réinitialisations plus simples existent, mais cela permet des exceptions sélectives.)

Explorez d'autres ressources sur MDN ou la spécification box-sizing. Les démos interactives améliorent la compréhension pratique.

Réglage du rembourrage dans CSS:

Le rembourrage est contrôlé à l'aide de padding-top, padding-right, padding-bottom, padding-left, ou de la propriété raccourci padding:

/* All sides */
padding: 20px;

/* Vertical | Horizontal */
padding: 2em 4em;

/* Top | Horizontal | Bottom */
padding: 1em 20px 2em;

/* Top | Right | Bottom | Left */
padding: 10px 10% 2em 15%;

Copier après la connexion

Une démo de codepen illustre ces exemples. Observez l'impact de la suppression box-sizing: border-box.

Définition de la marge dans CSS:

Similaire au rembourrage, la marge est contrôlée à l'aide de margin-top, margin-right, margin-bottom, margin-left, ou de la propriété raccourci margin:

html {
  box-sizing: border-box;
}
*, *:before, *:after {
  box-sizing: inherit;
}

Copier après la connexion

Une démo de codepen présente l'utilisation des marges avec des éléments flottés.

Considérations de marge et de rembourrage:

Sélection de l'unité: Évitez les unités absolues (pixels) pour les marges et le rembourrage dans la conception réactive. Les valeurs basées sur le pourcentage s'adaptent aux changements de taille d'écran. em Les unités évoluent avec la taille de la police. Les unités de la fenêtre (vw, vh, vmin, vmax) sont basées sur la taille de la fenêtre.

Calcul de l'unité: Les pourcentages sont relatifs à la largeur de l'élément parent. Les unités em sont relatives à la taille de la police de l'élément. Les unités de la fenêtre sont relatives aux dimensions de la fenêtre.

Effondrement de la marge: Les marges supérieures et inférieures des éléments et sœurs adjacents peuvent s'effondrer en une seule marge. Les marges parent-enfant peuvent également s'effondrer. L'ajout de rembourrage ou de frontières l'empêche.

Applications pratiques:

Éléments de centrage: Utiliser margin: 10px auto; pour centrer les éléments au niveau du bloc horizontalement dans leur parent.
Éléments d'espacement: Les marges espacent efficacement les éléments séparés, particulièrement utiles avec Flexbox.
Ratios d'aspect de maintien: Réglez la hauteur du parent à zéro et utilisez padding-top (calculé à partir du rapport d'aspect) pour maintenir les rapports d'aspect de l'image.

Conclusion:

Ce tutoriel différencie les marges et le rembourrage, démontrant leur syntaxe scolarisée et leurs unités appropriées. Des applications de mise en page pratiques et d'autres ressources sont fournies. Améliorez vos compétences CSS avec des techniques avancées.

FAQS:

marge par rapport au rembourrage: La marge est un espace externe; Le rembourrage est un espace interne.
Valeurs de réglage: Utiliser margin et padding Propriétés avec diverses unités (pixels, pourcentages, em, rem).
SHORTANT DE MARGE: La propriété margin permet de définir les quatre marges.
Valeurs négatives: Les valeurs négatives sont autorisées pour les deux.
auto Valeur: auto Pour les marges centres des éléments horizontalement.
Valeurs de pourcentage: Les pourcentages sont relatifs à la largeur du parent.