Comment définir les marges et le rembourrage CSS, et des astuces de mise en page cool

Ce tutoriel clarifie la distinction entre les marges CSS et le rembourrage, illustrant leur impact sur l'espacement des éléments de la 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 CSS sont des boîtes rectangulaires dont les dimensions sont définies par le contenu, le rembourrage, la bordure et la marge.
• Le dimensionnement des boîtes 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, provoquant fréquemment des problèmes de mise en page. Le réglage box-sizing: border-box est une solution courante.
• 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 ont des applications polyvalentes, y compris le centrage des éléments dans leurs conteneurs, l'espacement des éléments et le maintien des rapports d'aspect de l'image. La maîtrise de ces techniques résout de nombreux problèmes de mise en page.

Le modèle de boîte CSS a expliqué:

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

• Contenu (le texte intérieur ou les images de l'élément)
• rembourrage (espace entre le contenu et la bordure)
• Border (le contour de l'élément)
• marge (espace externe entre l'élément et d'autres éléments)

Le diagramme suivant illustre cette structure:

Comprendre le dimensionnement de la boîte CSS:

Le dimensionnement des boîtes est une source fréquente de confusion pour les nouveaux arrivants CSS. Deux éléments de largeur de 50% pourraient ne pas correspondre à leur conteneur en raison du rembourrage et des bordures supplémentaires.

Par défaut (box-sizing: content-box), le rembourrage et les frontières augmentent la largeur globale de l'élément. Pour simplifier la mise en page, définissez box-sizing: border-box afin que le rembourrage et les bordures soient inclus dans la largeur spécifiée. Les réinitialisations du CSS s'appliquent souvent border-box à l'échelle mondiale:

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

Expérimentez avec des démos interactives pour solidifier votre compréhension.

Réglage du rembourrage dans CSS:

Tampon de contrôle en utilisant padding-top, padding-right, padding-bottom, padding-left, ou 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%;

Définition de la marge dans CSS:

Similaire au rembourrage, utilisez margin-top, margin-right, margin-bottom, margin-left, ou la propriété raccourci margin:

/* All sides */
margin: 10px;

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

/* Top | Horizontal | Bottom */
margin: 2em auto 2em;

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

Les marges créent un espace entre les éléments.

Considérations de marge et de rembourrage:

• Unités: Évitez les unités absolues (pixels) pour les marges et le rembourrage dans la conception réactive. Les pourcentages ou les unités relatives (EM, REM) s'adaptent mieux à la taille de l'écran et aux modifications de la police.

• Calcul de l'unité: Les navigateurs calculent la marge et le rembourrage différemment en fonction de l'unité utilisée (pourcentage basé sur la largeur du parent, EM en fonction de la taille de la police des éléments, des unités de la fenêtre en fonction des dimensions de la fenêtre).

• Effondrement de la marge: Les marges supérieures et inférieures des frères et sœurs adjacentes peuvent s'effondrer en une seule marge (la plus grande des deux). L'ajout de rembourrage ou une bordure l'empêche.

Applications pratiques:

• Centrement: Éléments centraux au niveau du bloc en utilisant horizontalement en utilisant margin: 10px auto;.

• Éléments d'espacement: Utilisez des marges pour espacer les éléments séparés, particulièrement utiles avec Flexbox.

• Maintenir des rapports d'aspect: Utiliser le toit-top en pourcentage (calculé à partir du rapport d'aspect souhaité) sur un élément parent avec une hauteur: 0 pour maintenir les rapports d'aspect de l'image.

Conclusion:

Ce tutoriel fournit une base solide dans la compréhension et l'utilisation des marges et un rembourrage CSS. Une exploration plus approfondie des techniques avancées améliorera vos compétences CSS.

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!