Valeur de remplissage relative. Comment définir la marge et le remplissage CSS (et des conseils de mise en page intéressants). Ce qu'il faut retenir

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 rembourrage et la bordure sont ajoutés en haut dimensions données, ce qui peut entraîner des conséquences inattendues 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 somme du contenu, du remplissage et de la bordure comme largeur. 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.

Voici 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; )

HTML (

dimensionnement de la boîte : bordure-boîte ;

* , * : avant après (

box - dimensionnement : 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 1em. 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 façons intéressantes appliquer des propriétés dans les mises en page et vous a également fourni 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.

Description

Définit la valeur des marges autour du contenu de l'élément. La marge est la distance entre le bord intérieur du cadre de l’élément et le rectangle imaginaire qui délimite son contenu (Fig. 1).

La propriété padding vous permet de définir la valeur de remplissage 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

remplissage : [valeur | pour cent] (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 taille des champs peut être spécifiée en pixels (px), en pourcentages (%) ou en d'autres unités acceptables pour CSS. La valeur d'héritage indique qu'elle est héritée du parent. Lorsque vous spécifiez la marge sous forme de pourcentage, la valeur est calculée à partir de la largeur du parent de l'élément.

HTML5 CSS2.1 IE Cr Op Sa Fx

rembourrage

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat. Ut wisis enim ad minim veniam, quis nostrud exerci tution ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.

Résultat cet exemple montré sur la fig. 2.

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

Modèle objet

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

Navigateurs

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

Dans le chapitre précédent, nous avons mentionné de tels Propriétés CSS, comme margin (champ) et padding (retrait). Nous allons maintenant les examiner plus en détail et examiner en quoi ils diffèrent les uns des autres et quelles sont leurs caractéristiques.

Vous pouvez créer des espaces entre les éléments d'une manière ou d'une autre, mais si le remplissage est l'indentation du contenu jusqu'au bord du bloc, alors la marge est la distance d'un bloc à l'autre, l'espace interbloc. La capture d'écran montre un exemple clair :

Le remplissage sépare le contenu de la bordure du bloc et la marge crée des espaces entre les blocs

Comme vous pouvez le constater, les marges et le remplissage CSS diffèrent les uns des autres, même si parfois, sans regarder le code, il est impossible de déterminer quelle propriété est utilisée pour définir la distance. Cela se produit lorsque le cadre ou l'arrière-plan du bloc de contenu est manquant.

Les propriétés suivantes existent pour définir la marge ou le remplissage en CSS de chaque côté d'un élément :

Rembourrage:

dessus de rembourrage : signification;
rembourrage à droite : signification;
rembourrage en bas : signification;
padding-gauche : signification;

Des champs:

marge supérieure : signification;
marge droite : signification;
marge inférieure : signification;
marge gauche : signification;

Les valeurs peuvent être spécifiées dans n'importe quelle unité CSS - px, em, %, etc. Exemple : margin-top : 15px .

Il y a aussi une chose très pratique comme raccourci pour margin et padding CSS. Si vous devez définir des marges ou un remplissage sur les quatre côtés d'un élément, vous n'avez pas nécessairement besoin d'écrire la propriété de chaque côté individuellement. Tout est simplifié : pour la marge et le remplissage, vous pouvez spécifier 1, 2, 3 ou 4 valeurs à la fois. Le nombre de valeurs détermine la répartition des paramètres :

4 valeurs : le remplissage est défini pour tous les côtés de l'élément dans l'ordre suivant : haut, droite, bas, gauche : remplissage : 2px 4px 5px 10px ;
3 valeurs : le remplissage est défini d'abord pour le côté supérieur, puis simultanément pour la gauche et la droite, et enfin pour le bas : padding : 3px 6px 9px ;
2 valeurs : le remplissage est défini d'abord simultanément pour les côtés haut et bas, puis simultanément pour la gauche et la droite : padding : 6px 12px ;
Valeur 1 : un remplissage égal est défini pour tous les côtés de l'élément : padding : 3px ;

Les mêmes règles s'appliquent à la propriété CSS margin. Veuillez noter que vous pouvez également utiliser des valeurs négatives pour la marge (par exemple, -3px), ce qui peut parfois s'avérer très utile.

Marge de réduction

Imaginez la situation : deux élément de bloc sont situés les uns sur les autres et reçoivent des champs de marge. Pour bloc supérieur La valeur est définie sur margin: 60px et celle du bas est définie sur margin: 30px . Il serait logique de supposer que les deux champs limitrophes de deux éléments se toucheront simplement et que, par conséquent, l'écart entre les blocs sera égal à 90 pixels.

Cependant, les choses sont différentes. En fait, dans une telle situation, un effet appelé effondrement se produit lorsque la plus grande taille est sélectionnée parmi deux champs d'éléments adjacents. Dans notre exemple, l'écart final entre les éléments sera de 60 pixels.

La distance entre les blocs est égale à la plus grande des valeurs

La réduction de la marge ne fonctionne que pour les marges supérieure et inférieure des éléments et ne s'applique pas aux marges des côtés droit et gauche. La valeur finale de l'écart est calculée différemment selon les situations :

Lorsque les deux valeurs de marge sont positives, la taille de la marge résultante sera égale à la valeur la plus grande.
Si l'une des valeurs est négative, alors pour calculer la taille du champ, vous devez obtenir la somme des valeurs. Par exemple, avec des valeurs de 20px et -18px la taille du champ sera égale à :
20 + (-18) = 20 – 18 = 2 pixels.
Si les deux valeurs sont négatives, les modules de ces nombres sont comparés et le nombre avec le module le plus grand (donc le plus petit des nombres négatifs) est sélectionné. Exemple : vous devez comparer les valeurs des champs -6px et -8px. Les modules des nombres comparés sont respectivement 6 et 8. Il s'ensuit que 6 -8. La taille du champ résultant est de -8 pixels.
Dans le cas où les valeurs sont précisées dans différentes unités CSS, ils sont réduits à un, après quoi ils sont comparés et la valeur la plus grande est sélectionnée.
La taille de la marge des éléments enfants est déterminée d'une manière encore plus intéressante : si un enfant a une marge plus grande que son parent, alors la priorité lui est donnée. Dans ce cas, les tailles des marges supérieure et inférieure du parent seront les mêmes que celles spécifiées pour l'enfant. Dans ce cas, il n’y aura aucune distance entre le parent et l’enfant.

Description

La propriété padding vous permet de définir la valeur de remplissage 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

remplissage : [valeur | pour cent] (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.

HTML5 CSS2.1 IE Cr Op Sa Fx

rembourrage

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

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

Modèle objet

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

Navigateurs

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

Laissez-moi vous le dire tout de suite : c'est une leçon très importante. Après l'avoir étudié, vous pourrez placer des éléments sur la page, définir des retraits entre eux, les créer à l'intérieur d'un bloc spécifique séparé et définir des marges.

rembourrage

Le remplissage est une propriété qui définit la quantité de remplissage d'un élément depuis le bord intérieur de la bordure jusqu'au contenu. Le contenu peut être du texte brut, une image ou un élément enfant qui peut également avoir ses propres champs.

Les unités peuvent être des pixels (px) ou un pourcentage (%).

#bloc (
remplissage : 12 px ; /* indentation des bordures du bloc au contenu - 12 pixels de tous les côtés */
}

Il est possible de spécifier un champ sur un seul côté spécifique :

dessus de rembourrage- propriété qui crée des champs en haut.
rembourrage à droite- propriété qui crée des champs à droite.
fond de rembourrage- une propriété qui crée des champs en bas.
rembourrage-gauche- propriété qui crée des champs à gauche.

#bloc (
rembourrage inférieur : 25 px ; /* marge inférieure 25 pixels */
remplissage à gauche : 15 px ; /* marge gauche 15 pixels */
}

Comme vous l'avez remarqué, si vous spécifiez ainsi des champs sur 2 ou 3 côtés, vous obtiendrez un code long. Il existe un raccourci pour la propriété padding à cet effet. Il indique tour à tour les 4 valeurs - à partir de chaque bord sur une ligne, le mouvement se déroule dans le sens des aiguilles d'une montre, en commençant par le haut :

Rembourrage : TopPadding RightPadding PaddingBottom PaddingLeft ;

#bloc (
remplissage : 25 px, 10 px, 15 px, 6 px ; /* 25px en haut, 10px à droite, 15px en bas, 6px à gauche */
}

marge

La propriété margin, contrairement au padding, définit le degré d'indentation entre les bordures des éléments.
Si l'élément est un enfant, alors le remplissage est l'espace compris entre la bordure de l'élément et le bord intérieur de la bordure du parent.
Si un élément n'a pas de parent, alors l'indentation est considérée comme l'espace libre défini par la propriété sur les bords du cadre des éléments environnants.

#bloc (
marge : 4px ;
}

Pour spécifier l'indentation uniquement sur certains côtés, les propriétés suivantes existent :

marge supérieure- propriété qui crée des retraits en haut.
marge droite- propriété qui crée une empreinte à droite.
marge inférieure- une propriété qui crée des retraits en bas.
marge gauche- propriété qui crée une indentation à gauche.

Comme la propriété padding, margin a également la capacité d'abréger les valeurs de différents côtés. Le mouvement se déroule dans le sens des aiguilles d'une montre, à partir du champ supérieur :

Marge : Marge supérieure Marge droite Marge Marge inférieure gauche ;

#bloc (
marge : 15px 10px 5px 25px ; /* 15px en haut, 10px à droite, 5px en bas, 25px à gauche */
}

Merci pour votre attention!