L'une des premières choses que la plupart d'entre nous avons apprises lorsque nous avons appris le CSS était les détails des différentes parties d'une boîte dans CSS, décrite sous le nom de Modèle de boîte CSS. L'un des éléments du modèle de boîte est la marge, une zone transparente entourant une boîte, ce qui éloignera les autres éléments du contenu de la boîte. Les propriétés margin-top margin-right margin-bottom et margin-left ont été décrites dès le début dans CSS1, avec le raccourci de la marge pour définir les quatre propriétés en même temps.
Une marge semble être une chose relativement simple, cependant, dans cet article, nous allons examiner certaines des choses qui attirent les gens vers le haut. en ce qui concerne l'utilisation des marges. En particulier, nous examinerons la manière dont les marges interagissent les unes avec les autres et comment fonctionne leur réduction.
Le modèle de boîte CSS
Comme pour tous les articles traitant de parties du modèle de boîte CSS, nous devons définir ce que nous entendons par là. par cela, et comment le modèle a été clarifié à travers les versions de CSS. Le modèle de boîte fait référence à la manière dont les différentes parties d'une boîte – le contenu, le remplissage, la bordure et la marge – sont disposées et interagissent les unes avec les autres. Dans CSS1, le modèle de boîte a été détaillé avec le diagramme d'art ASCII montré dans l'image ci-dessous
. quatre propriétés de marge pour chaque côté de la boîte et le raccourci de marge ont tous été définis dans CSS1.
La spécification CSS2.1 contient une illustration pour illustrer le modèle de boîte et définit également les termes que nous utilisons encore pour décrire. les différentes boîtes. La spécification décrit la zone de contenu la zone de rembourrage la zone de bordure et la zone de marge chacune étant définie par les bords du contenu. , remplissage, bordure et marge, respectivement.
Il existe maintenant une spécification de modèle de boîte de niveau 3 en tant que zone de travail. Brouillon. Cette spécification renvoie à CSS2 pour les définitions du modèle de case et des marges il s'agit donc de la définition CSS2 que nous allons utiliser pour la majorité de cet article.
Margin Collapsing
La spécification CSS1 , en définissant les marges, a également défini que les marges verticales s’effondrent . Ce comportement qui s'effondre a été une source de frustration depuis. La réduction des marges est logique si vous considérez que, dans ces premiers temps, CSS était utilisé comme langage de formatage de documentation. L'effondrement des marges signifie que, lorsqu'un en-tête avec une marge inférieure est suivi d'un paragraphe avec une marge supérieure, vous n'obtenez pas un écart énorme entre ces éléments.
Lorsque les marges se réduisent, elles se combinent pour que l'espace entre les deux éléments soit réduit. les éléments devient la plus grande des deux marges. La marge la plus petite finit essentiellement dans la plus grande.
Les marges s'effondrent dans les situations suivantes:
Examinons tour à tour chacun de ces scénarios, puis examinons les éléments qui empêchent la réduction des marges dans ces scénarios.
Frères et sœurs adjacents
Ma description initiale de l'effondrement des marges est une démonstration de l'effondrement des marges entre frères et sœurs adjacents. Sauf dans les situations mentionnées ci-dessous, si vous avez deux éléments qui s'affichent l'un après l'autre dans un flux normal, la marge inférieure du premier élément s'effondrera avec la marge supérieure de l'élément suivant.
Dans l'exemple de CodePen ci-dessous, il sont trois div éléments. Le premier a une marge supérieure et inférieure de 50 pixels. La seconde a une marge supérieure et inférieure de 20 pixels. La troisième a une marge supérieure et inférieure de 3em. La marge entre les deux premiers éléments est de 50 pixels, la marge supérieure la plus petite étant combinée à la marge inférieure la plus grande. La marge entre les deux deuxièmes éléments de 3em, car 3em est supérieure aux 20 pixels situés en bas du deuxième élément.
Voir le stylo [Margins: adjacent siblings] (https://codepen.io/rachelandrew/pen/OevMPo). par Rachel Andrew .
Boîte complètement vide
Si une boîte est vide , sa marge supérieure et sa marge inférieure peuvent alors s’effondrer. Dans l'exemple suivant de CodePen, l'élément avec une classe vide a une marge supérieure et inférieure de 50 pixels. Toutefois, l'espace entre les premier et troisième éléments n'est pas de 100 pixels, mais de 50. Cela est dû au fait que les deux marges se réduisent. Ajouter quoi que ce soit dans cette boîte (même le rembourrage) fera en sorte que les marges supérieure et inférieure ne soient pas effacées.
Voir le stylo [Margins: empty boxes] (https://codepen.io/rachelandrew/pen/JQLGMr) de par Rachel Andrew .
Élément parent et premier ou dernier élément enfant
Voici la marge scénario qui s'effondre le plus souvent, car il ne semble pas particulièrement intuitif. Dans le code suivant, j'ai un div avec une classe de wrappers, et j'ai donné que div un contour en rouge afin que vous puissiez voir où il se trouve est. Les trois éléments enfants ont tous une marge de 50 pixels. Toutefois, les premier et dernier éléments sont alignés sur les bords de l'emballage. il n'y a pas de marge de 50 pixels entre l'élément et l'emballage.
Voir le stylo [Margins: margin on first and last child] (https://codepen.io/rachelandrew/pen/BgrKGp) de Rachel Andrew . 19659022] Voir le stylo Marges: marge du premier et du dernier enfant de Rachel Andrew .
En effet, la marge de l’enfant s’effondre avec une marge sur le parent de telle sorte que à l'extérieur du parent. Vous pouvez le voir si vous inspectez le premier enfant à l'aide de DevTools. La zone jaune en surbrillance est la marge.
Seules les marges de bloc s'effondrent
Le dernier exemple met également en évidence quelque chose à propos de l'effondrement de la marge. En CSS2, seules les marges verticales sont spécifiées pour être réduites - c'est-à-dire les marges supérieure et inférieure d'un élément si vous êtes en mode d'écriture horizontale. Ainsi, les marges gauche et droite ci-dessus ne s'effondrent pas et finissent en dehors de l'emballage.
Note : Il est bon de se rappeler que les marges ne s'effondrent que dans la direction du bloc, comme entre les paragraphes. 19659037] Objets empêchant l'effondrement des marges
Les marges ne s'effondrent jamais si un élément a un positionnement absolu ou est flottant. Cependant, si vous rencontrez l'un des endroits où les marges se réduisent comme indiqué ci-dessus, comment pouvez-vous empêcher ces marges de s'effondrer? La première chose qui arrête de s'effondrer concerne les situations où il y a quelque chose entre les éléments en question. Par exemple, une boîte complètement vide de contenu ne réduira pas ses marges supérieure et inférieure si une bordure ou un remplissage est appliqué. Dans l'exemple ci-dessous, j'ai ajouté 1px de remplissage à la boîte. Il existe maintenant une marge de 50 pixels au-dessus et en dessous de la boîte. Voir le stylo [Margins: empty boxes with padding do not collapse] (https://codepen.io/rachelandrew/pen/gNeMpg) de Rachel Andrew . [19659022] Voir le stylo Marges: les boîtes vides avec rembourrage ne s'effondrent pas de Rachel Andrew . C’est la logique derrière, si la boîte est complètement vide sans bordure ni rembourrage, c'est essentiellement invisible. Il peut s'agir d'un élément de paragraphe vide jeté dans le balisage par votre CMS. Si votre CMS ajoutait des éléments de paragraphe redondants, vous ne voudriez probablement pas qu’ils causent de grands écarts entre les autres paragraphes en raison du respect de leurs marges. Ajoutez n'importe quoi dans la boîte et vous obtiendrez ces lacunes. Un comportement similaire peut être observé avec des marges sur le premier ou le dernier enfant qui s'effondrent sous l'effet du parent. Si nous ajoutons une bordure au parent, les marges des enfants restent à l'intérieur. Voir le stylo [Margins: margin on first and last child doesn’t collapse if the parent has a border] (https://codepen.io/rachelandrew/pen/vqRKKX) de Rachel Andrew logique au comportement. Si vous avez des éléments d'habillage à des fins sémantiques qui ne s'affichent pas visuellement, vous ne voudrez probablement pas qu'ils introduisent de grandes lacunes dans l'affichage. Cela faisait beaucoup de sens quand le web était principalement du texte. Ce comportement est moins utile lorsque nous utilisons des éléments pour tracer un dessin. Un nouveau contexte de formatage de blocs (BFC) empêchera également le repliement des marges à travers l'élément contenant. Si nous regardons à nouveau l'exemple du premier et du dernier enfant, leurs marges se trouvant en dehors de l'emballage, et affichons l'emballage: Voir le stylo [Margins: a new Block Formatting Context contains margins] (https://codepen.io/rachelandrew/pen/VJXjEp) de Rachel Andrew . Pour en savoir plus sur Les conteneurs Flex et Grid établissent les contextes de formatage Flex et Grid pour leurs enfants. Ils ont donc un comportement différent pour bloquer la disposition. L'une de ces différences est que les marges ne s'effondrent pas: «Un conteneur flex crée un nouveau contexte de formatage flexible pour son contenu. Cela revient à établir un contexte de formatage de bloc, sauf que flex layout est utilisé à la place de block layout. Par exemple, les flotteurs ne pénètrent pas dans le conteneur Flex, et les marges du conteneur Flex ne s'effondrent pas avec les marges de son contenu. " Si nous prenons l'exemple ci-dessus et faisons en sorte que emballer dans un conteneur flex, en affichant les éléments avec Voir le stylo [Margins: margins on flex items do not collapse] ( https://codepen.io/rachelandrew/pen/mZxreL) de Rachel Andrew . En raison de l’effondrement des marges, c’est une bonne idée de proposer une méthode cohérente pour traiter les marges de votre site. La chose la plus simple à faire est de définir uniquement les marges sur le haut ou du bas des éléments. De cette façon, vous ne devriez pas rencontrer trop souvent d'effondrements de marge, car le côté avec une marge sera toujours adjacent à un côté sans marge. Note : Harry Roberts a une excellente post détaillant les raisons pour lesquelles il est judicieux de ne définir les marges que dans un sens, et pas uniquement en raison de la résolution des problèmes de marge qui s'effondrent. Cette solution ne résout pas les problèmes que vous pourriez rencontrer avec des marges. les enfants s'effondrent par l'intermédiaire de leurs parents. Cette question particulière a tendance à être moins courante et savoir pourquoi se produit peut vous aider à trouver une solution. Une solution idéale consiste à donner aux composants qui en ont besoin La plupart du temps, je trouve que savoir pourquoi les marges s'effondrent. (ou pas) est la chose clé. Vous pouvez ensuite déterminer au cas par cas comment le gérer. Quoi que vous choisissiez, assurez-vous de partager cette information avec votre équipe. Très souvent, le fait de réduire les marges est un peu mystérieux, alors la raison pour laquelle il faut faire quelque chose pour la contrer n’est peut-être pas évidente! Un commentaire dans votre code est très utile - vous pouvez même créer un lien vers cet article et contribuer à partager les connaissances sur l'effondrement des marges. Je pensais arrondir cet article à quelques autres informations relatives aux marges. Lorsque vous utilisez un pourcentage dans CSS, il doit s'agir d'un pourcentage de quelque chose. Les marges (et les marges intérieures) définies à l'aide de pourcentages correspondront toujours à un pourcentage de la taille en ligne (largeur en mode d'écriture horizontale) du parent. Cela signifie que vous utiliserez des pourcentages de remplissage de taille égale tout autour de l'élément. Dans l'exemple de CodePen ci-dessous, j'ai un wrapper de 200 pixels de large, à l'intérieur d'une zone contenant 10% de marge, la marge est de 20 pixels sur tous les côtés, soit 10% de 200. Voir le stylo [Margins: percentage margins] (https://codepen.io/rachelandrew/pen/orqzrP) de Rachel Andrew . Nous avons parlé des marges verticales tout au long de cet article, Cependant, les CSS modernes ont tendance à penser les choses de manière relative plutôt que physique. Par conséquent, lorsque nous parlons de marges verticales, nous parlons vraiment de marges dans la dimension de bloc. Ces marges seront en haut et en bas si nous sommes en mode écriture horizontale, mais seraient à droite et à gauche en mode écriture vertical écrit de gauche à droite. Une fois que vous travaillez avec des directions logiques et relatives, il devient plus facile de parler de bloc. commencer et bloquer la fin, plutôt que haut et bas. Pour faciliter cela, CSS a introduit la spécification des propriétés logiques et des valeurs. Cela mappe les propriétés relatives des flux sur les propriétés physiques. Pour les marges, cela nous donne les mappages suivants (si nous travaillons en anglais ou dans tout autre mode d'écriture horizontal avec une direction de texte de gauche à droite). -top = Nous avons également deux nouveaux raccourcis qui permettent de placer les deux blocs en même temps ou les deux en ligne. Dans l'exemple suivant de CodePen, j'ai utilisé ces mots clés relatifs au flux, puis modifié le mode d'écriture de la zone. Vous pouvez ainsi voir comment les marges suivent l'orientation du texte plutôt que d'être liées à la physique haut, droite, bas et à gauche. Voir le stylo [Margins: flow relative margins] (https://codepen.io/rachelandrew/pen/BgrQRj) de Rachel Andrew . Vous pouvez en savoir plus sur les propriétés logiques et les valeurs sur MDN ou dans mon article « Comprendre les propriétés et les valeurs logiques ”dans Smashing Magazine. Vous savez maintenant presque tout ce qu'il y a à savoir sur les marges! En bref: Création d'un contexte de formatage de blocs
: flow-root créant ainsi un nouveau BFC, les marges restent à l'intérieur. . affichez: flow-root lisez mon article « Comprendre la disposition CSS et le formatage de blocs Contexte ”. Modifier la valeur de la propriété overflow en auto aura le même effet, dans la mesure où cela crée également un nouveau BFC, bien que cela puisse également créer des barres de défilement que vous ne vouliez pas dans certains scénarios. . Conteneurs Flex And Grid
flex = direction: colonne vous pouvez voir que les marges sont maintenant contenues par l’emballage. De plus, les marges entre les éléments flexibles adjacents ne se réduisent pas, nous obtenons donc 100 pixels entre les éléments flexibles, soit le total des 50 pixels situés en haut et en bas des éléments. Stratégies de marge pour votre site
display: flow-root comme solution de secours pour les navigateurs plus anciens, vous pouvez utiliser le overflow pour créer un BFC, transformer le parent en un conteneur flex, ou même introduire un seul pixel de remplissage. N'oubliez pas que vous pouvez utiliser les requêtes de fonctions pour détecter la prise en charge de l'affichage : flow-root afin que seuls les anciens navigateurs obtiennent une solution moins optimale. Marges de pourcentage
Marges dans un monde relatif aux flux
margin-block-start
margin-right = margin-in-line-end margin-bottom = margin-block-end margin-left = margin-inline-start
margin-block margin-inline À conclure
Source link