titre dans une section de sept mots

La raison la plus simple pour laquelle vous devriez adhérer à ce principe est de faciliter la recherche de l'indentation à l'avenir, que ce soit pour vous ou pour quelqu'un qui travaillera avec votre mise en page à l'avenir. C’est une question de commodité.

Les vrais problèmes peuvent survenir lorsque des mises en page avec une mauvaise structure d'indentation sont rendues dynamiquement ou dupliquées.

Les retraits ne peuvent pas être définis pour les éléments indépendants (bloc BEM)

Si vous devez mettre en retrait un bloc. Sans préjudice, cela se fait en utilisant :

• Héritage via l'élément (si vous retirez ce bloc de l'élément, il n'y aura pas d'indentation et vous pourrez simplement le placer à un autre endroit).
• Ajout d'une classe (vous pouvez faire d'un bloc un élément).
• Wrapper (comme un bloc qui a un rôle, uniquement en positionnement).

Le dernier élément du groupe a l'indentation remise à zéro (toujours)

Pour le dernier li, l'indentation est remise à zéro. Et l'indentation est faite entre éléments adjacents ul et img. Ce qui a été discuté dans le deuxième principe.

Prenons un autre exemple :

Nous nous intéressons à la marge entre les actualités qui est set.blog-preview__item (margin-bottom : 20px ;). La dernière marge est réinitialisée à zéro et l'indentation inférieure est réalisée en remplissant blog-preview . Ce qui a été discuté dans le deuxième principe.

Plus souvent que les autres pseudo-classes, vous devez utiliser :last-child.

Item:not(:last-child) ( margin-bottom: 20px; ) // ou // .item ( // autres styles // margin-bottom: 20px; &:last-child ( margin-bottom: 0; ) ) // ou margin-top, l'idée principale ici n'est pas dans le sens de la marge, mais en l'absence d'excès // .item + .item ( margin-top: 20px; ) // ou // .item ( / / autres styles // & + & ( margin-top : 20px; ) )

Exceptions

Bien sûr, il existe des cas particuliers, des tâches non triviales et des nuances dans lesquelles il est impossible de respecter ces principes, mais sinon, il vaut la peine de s'efforcer d'obtenir des indentations idéales afin de rendre la mise en page aussi propre que possible.

P.S. Je vous conseille de lire la publication

Description

Définit la quantité de remplissage de chaque bord de l'élément. La marge est l'espace entre la bordure de l'élément actuel et la bordure intérieure de son élément parent (Fig. 1).

Riz. 1. Retrait du bord gauche de l'élément

Si l'élément n'a pas de parent, le remplissage sera la distance entre le bord de l'élément et le bord de la fenêtre du navigateur, en tenant compte du fait que la fenêtre elle-même a également un remplissage défini par défaut. Pour vous en débarrasser, vous devez définir la valeur de marge du sélecteur égal à zéro.

La propriété margin vous permet de définir la valeur de marge pour tous les côtés d'un élément à la fois ou de la définir uniquement pour les côtés spécifiés.

Syntaxe

marge : [valeur | intérêt | automatique] (1,4) | hériter

Valeurs

Vous pouvez utiliser une, deux, trois ou quatre valeurs, séparées par un espace. L'effet dépend du nombre de valeurs et est indiqué dans le tableau. 1.

La quantité d'indentation peut être spécifiée en pixels (px), en pourcentage (%) ou en d'autres unités acceptables pour CSS. La valeur peut être un nombre positif ou négatif.

Auto Spécifie que la quantité d'indentation sera automatiquement calculée par le navigateur.

HTML5 CSS2.1 IE Cr Op Sa Fx

Le résultat de cet exemple est présenté sur la Fig. 2.

Riz. 2. Application de la propriété margin

Modèle objet

document.getElementById("elementID ").style.margin

Navigateurs

Internet Explorer 6 en mode bizarre ne prend pas en charge le centrage d'un bloc à l'aide de la règle automatique margin : 0. Il existe également un bug dans ce navigateur qui consiste à doubler la valeur de remplissage gauche ou droite pour les éléments flottants imbriqués dans les éléments parents. La marge adjacente au côté parent est doublée. Le problème est généralement résolu en ajoutant display: inline à l'élément flottant.

Les versions d'Internet Explorer jusqu'à la version 7.0 incluse ne prennent pas en charge la valeur d'héritage.

Note

Pour les éléments de bloc situés verticalement les uns à côté des autres, un effet d'effondrement est observé lorsque les retraits ne sont pas additionnés, mais combinés les uns avec les autres. L'effondrement lui-même agit sur deux blocs ou plus (l'un peut être imbriqué dans un autre) avec des retraits en haut ou en bas, tandis que les retraits adjacents sont combinés en un seul. Pour le remplissage gauche et droit, la réduction n’est jamais appliquée.

La réduction ne fonctionne pas :

• pour les éléments dont la propriété padding est définie du côté de la réduction.
• pour les éléments qui ont une limite spécifiée du côté qui s'effondre ;
• sur des éléments à positionnement absolu, c'est-à-dire ceux dont la position est définie sur absolue ;
• sur les éléments flottants (pour lesquels la propriété float est définie sur left ou right ) ;
• pour les éléments en ligne ;
• Pour .

De l'auteur : Quand j’ai commencé à apprendre CSS, j’étais toujours confus au sujet de la marge et du remplissage. Ils semblaient très similaires et donnaient dans certains cas le même résultat. Dans ce didacticiel, vous verrez la différence entre la marge CSS et le remplissage, et comment ces propriétés affectent l'espace entre les éléments de la page. Nous discuterons également de l’effondrement des marges et de l’utilisation de différentes unités de mesure lors de la création de sites Web réactifs. Nous terminerons l'article avec quelques conseils sur la mise en page utilisant la marge et le remplissage.

Modèle de bloc

Les éléments en CSS sont représentés sous forme de boîtes rectangulaires. La taille d'un bloc rectangulaire est déterminée par les propriétés de l'élément : contenu, remplissage, cadre, marge.

La zone de contenu de l'élément est située au milieu. Ensuite, un remplissage entoure la zone de contenu. Le cadre entoure le rembourrage et la marge est la couche externe, c'est-à-dire il est en dehors de l'élément. Pour mieux comprendre de quoi nous parlons, voici un schéma.

Comme vous pouvez le voir sur le diagramme, le remplissage est un calque qui étend un élément du bord extérieur de la zone de contenu jusqu'au bord intérieur du cadre. Cette propriété contrôle la distance entre la bordure de l'élément et son contenu. Le remplissage affecte la taille d'un élément sur une page, mais il n'a aucun effet sur l'espacement entre les éléments d'une page.

Si vous devez augmenter ou diminuer la distance entre les éléments, utilisez la marge. La propriété margin n'affecte en aucun cas la taille de l'élément.

Il est important de se rappeler que la taille de tous les blocs d’une page Web dépend du modèle de bloc utilisé. Il existe deux modèles de blocs : le modèle de bloc W3C et le modèle de bloc traditionnel.

Selon le modèle de bloc du W3C, la largeur d'un élément est calculée à partir du contenu du bloc sans prendre en compte le remplissage et la marge. Le remplissage et la bordure sont ajoutés au-dessus des dimensions données, ce qui peut avoir des effets imprévisibles sur la mise en page.

Par exemple, prenons un bloc d'une largeur de 200 px et d'une hauteur de 200 px, un remplissage de 10 px de tous les côtés et une bordure de 2 px de tous les côtés. Le navigateur ne voit pas le bloc 200px. Le navigateur calcule l'espace horizontal requis pour afficher le bloc, et il est de 224 px : 200 (largeur) + 2 (bordure gauche) + 10 (remplissage gauche) + 10 (remplissage droit) + 2 (bordure droite) = 224 px. Puisqu'il s'agit d'un carré, la hauteur sera également de 224 px.

D'un autre côté, le modèle de bloc traditionnel prend la largeur comme la somme du contenu, du remplissage et de la bordure. Cela signifie que si votre bloc fait 200 px de large, le navigateur calculera l'espace horizontal nécessaire pour l'afficher, et il fera 200 px, remplissage et bordure compris. Le résultat est plus prévisible et plus facile à travailler.

Par défaut, tous les navigateurs utilisent le modèle de bloc W3C. Le modèle peut être défini manuellement à l'aide de la propriété box-sizing. Deux valeurs sont acceptées : content-box (W3C) et border-box (modèle traditionnel). Le modèle traditionnel est plus intuitif, ce qui en fait le plus populaire parmi les développeurs Web.

Vous trouverez ci-dessous comment utiliser le dimensionnement de boîte pour utiliser le modèle traditionnel dans votre projet :

html ( box-sizing: border-box; ) *, *:avant, *:after ( box-sizing:hériter; )

Si vous vous souvenez des choses plus rapidement lorsque vous les faites vous-même, essayez d'expérimenter la démo interactive amusante de Guy Routledge.

Définition de la marge et du remplissage

Vous pouvez utiliser les propriétés padding-top, padding-right, padding-bottom et padding-left pour contrôler le remplissage sur les quatre côtés d'un élément. Le remplissage peut également être spécifié via une propriété raccourcie. Si une seule valeur de remplissage est écrite, CSS l'utilise pour déterminer le remplissage des 4 côtés :

/* les 4 côtés */ padding: 10px;

Si 3 valeurs sont présentées, la première est responsable du haut, la seconde de la gauche et de la droite, et la troisième du bas :

/* haut | horizontale | bas */ remplissage : 1em 20px 2em ;

Si les 4 valeurs sont présentées, alors chacune est responsable respectivement du haut, de la droite, du bas et de la gauche :

/* haut | à droite | bas | gauche */ remplissage : 10px 10 % 2em 15 % ;

Dans la démo ci-dessous, le fond orange est la zone de contenu des différents éléments, la zone blanche entre le cadre et le contenu est le remplissage :

La marge externe, comme le remplissage, peut être contrôlée sur les 4 côtés à l'aide des propriétés margin-top, margin-right, margin-bottom et margin-left. Vous pouvez également définir une marge pour les 4 côtés à la fois en utilisant la propriété raccourcie.

/* les 4 côtés */ margin: 10px; /* vertical | horizontal */ marge : 2em 4em ; /* haut | horizontale | bas */ marge : 2em auto 2em ; /* haut | à droite | bas | gauche */ marge : 10px 10 % 2em 15 % ;

Ce qu'il faut retenir

Utilisez les bonnes unités de mesure

Lorsque vous travaillez avec le remplissage et la marge, évitez les unités de mesure absolues. Ces unités ne s'adaptent pas aux changements de taille de police et de largeur d'écran.

Supposons que vous définissiez la largeur de l'élément à 50 % et la marge à 15 px. Avec une largeur de 1 200 px, la largeur de l'élément sera de 600 px et la marge sera de 15 px. À une largeur de 769 px, la largeur de l'élément sera de 384 px et la marge sera toujours de 15 px.

La largeur de l'élément a changé de 36 %, mais sa marge est restée la même. Dans la plupart des cas, ce n’est pas le plus gros problème. Cependant, si vous définissez la marge de l'élément sur un pourcentage, vous aurez plus de contrôle sur la mise en page sur tous les écrans. Tout semblera proportionnel sans sauts soudains dans les valeurs de marge et de remplissage appliquées.

De même, vous souhaiterez peut-être ajouter un remplissage aux éléments de texte de la page. Dans la plupart des cas, vous souhaitez que le remplissage soit proportionnel à la taille de la police de l'élément. Ceci est impossible à faire en unités absolues. Cependant, si vous définissez le remplissage sur em, il s'ajustera automatiquement à la taille de la police. La démo ci-dessous montre la mise à l'échelle en action.

Comment les navigateurs calculent la marge et le remplissage pour différentes unités de mesure

Les navigateurs calculent les valeurs de marge finale et de remplissage différemment selon les unités de mesure.

La marge et le remplissage, spécifiés en pourcentage, sont calculés par rapport à la largeur du conteneur. Autrement dit, un remplissage de 5 % sera égal à 5 px si la largeur du conteneur est de 100 px, ou à 50 px si la largeur du conteneur est de 1 000 px. N'oubliez pas que les valeurs supérieure et inférieure sont également calculées en fonction de la largeur du conteneur.

Dans le cas d'em, la marge et le remplissage sont basés sur la taille de police de l'élément. Dans la démo précédente, le remplissage des trois éléments de texte inférieurs est de 1 em. En raison des différentes tailles de police, la valeur de remplissage calculée sera toujours différente.

Il existe également 4 unités de mesure de fenêtre d'affichage vw, vh, vmin et vmax. Dans ce cas, les valeurs de marge et de remplissage dépendront de la fenêtre d'affichage. Par exemple, le remplissage 5vw sera égal à 25px avec une largeur de fenêtre de 500px, et le remplissage 10vw sera égal à 50px sur la même fenêtre. Vous pouvez étudier ces unités de mesure plus en détail dans l'article sur le site SitePoint « CSS Viewport of Units of Measure : Quick Start ».

Si vous êtes débutant, connaître le fonctionnement de ces unités vous aidera à comprendre rapidement pourquoi le remplissage et la marge des éléments HTML changent en fonction de la taille du parent, de la police ou même de la fenêtre d'affichage. Et cela vous donnera la possibilité de contrôler votre mise en page.

Effondrement des marges

Vous devez également connaître le concept d’effondrement des marges. Dans certaines situations, les marges supérieure et inférieure de deux éléments peuvent être réduites à une seule. Ce phénomène est appelé effondrement des marges.

Disons que vous avez deux éléments l'un en dessous de l'autre, c'est-à-dire au même niveau. Si vous définissez une marge inférieure de 40 px sur le premier élément et une marge supérieure de 25 px sur le second, alors la marge totale entre les éléments ne sera pas égale à 65 px. L'indentation sera égale à la valeur de la plus grande marge, c'est-à-dire 40px.

De même, la marge peut s'effondrer entre le parent et le premier ou le dernier enfant. Cela se produit s'il n'y a pas de bordure, de remplissage ou de contenu en ligne séparant les marges enfant et parent. Dans ce cas, s'il n'y a pas de remplissage ou de bordure sur le parent, la marge de l'élément enfant « coulera » du parent.

Ce comportement peut être corrigé. Pour ce faire, vous devez ajouter une barrière entre les marges parent et enfant. La démo ci-dessous montre comment l'ajout d'une bordure ou d'un remplissage à l'élément parent peut résoudre le problème.

Dans le cas de marges négatives, la valeur finale de la marge réduite est égale à la somme de la marge positive avec la plus petite marge négative. Vous pouvez étudier le sujet de l'effondrement des marges plus en détail dans l'article « Collapsing Margins » d'Adam Roberts.

Façons intéressantes d'utiliser la marge et le remplissage

Parfois, la marge et le remplissage peuvent aider à résoudre des problèmes de mise en page. Voici quelques exemples :

Conserver les proportions des images

Souvent, les images d’une page ont des proportions différentes. Si vous devez afficher toutes les images avec le même rapport hauteur/largeur, le remplissage CSS vous aidera.

Pour ce faire, vous devez définir la hauteur du parent sur zéro et la propriété padding-top du parent doit être égale à la valeur du rapport hauteur/largeur, exprimée en pourcentage.

Par exemple, un rapport hauteur/largeur de 16:9 est obtenu par remplissage : 56,25 % 0 0 0. La valeur 56,25 est obtenue par (9/16)*100. En utilisant cette méthode, vous pouvez calculer les pourcentages de remplissage pour tout autre rapport hauteur/largeur.

Conclusion

Si vous commencez tout juste à apprendre le CSS, j'espère que ce tutoriel vous a aidé à comprendre la différence entre margin et padding. Vous devez apprendre à définir la marge et le remplissage à l'aide d'abréviations et d'unités de mesure appropriées. Dans la dernière section, j'ai montré deux manières intéressantes d'utiliser les propriétés dans les mises en page et je vous ai également donné des liens vers des ressources pour un apprentissage plus approfondi. Si vous avez d'autres conseils sur la marge et le remplissage CSS, veuillez les publier dans les commentaires.