Les distances de marge et de remplissage sont spécifiées dans . Marges et remplissage CSS : différence entre les propriétés de marge et de remplissage. L'indentation est définie sur le dernier élément possible de la maison

Permettez-moi de vous dire tout de suite, c'est une leçon très importante. Après l'avoir étudié, vous pourrez organiser 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é, définir des marges.

rembourrage

Le rembourrage est une propriété qui définit la quantité de rembourrage 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 marges.

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

#bloc(
rembourrage : 12px /* rembourrage des bordures du bloc au contenu - il y aura 12 pixels de tous les côtés */
}

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

dessus de rembourrage- une propriété qui crée des marges sur le dessus.
rembourrage à droite- une propriété qui crée des champs à droite.
fond de rembourrage- propriété qui crée des marges inférieures.
rembourrage gauche- une propriété qui crée des marges à gauche.

#bloc(
rembourrage en bas : 25px /* marge inférieure 25px */
rembourrage à gauche : 15 px ; /* marge gauche 15px */
}

Comme vous l'avez remarqué, si vous spécifiez des champs de 2 ou 3 côtés de cette manière, vous obtiendrez un code long. Il existe une notation abrégée pour la propriété padding pour cela. Les 4 valeurs y sont indiquées à tour de rôle - à partir de chaque bord sur une ligne, le mouvement va dans le sens des aiguilles d'une montre, en partant du haut:

Rembourrage : rembourrage supérieur rembourrage droit rembourrage inférieur gauche ;

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

marge

La propriété margin, contrairement au rembourrage, définit la quantité de remplissage entre les bordures des éléments.
Si l'élément est un enfant, le remplissage est l'espace entre la bordure de l'élément et le bord intérieur de la bordure du parent.
Si l'é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 de la bordure des éléments environnants.

#bloc(
marge : 4px
}

Pour spécifier des retraits uniquement sur certains côtés, les propriétés suivantes existent :

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

Comme la propriété padding, margin a également la capacité de raccourcir les valeurs des différents côtés. Le mouvement va dans le sens des aiguilles d'une montre, à partir de la marge supérieure :

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

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

Merci pour votre attention!

La source: marge ou rembourrage ?
Philippe Sporrer.
Traduction: vl49.

Quand est-il préférable d'utiliser les marges et quand utiliser le rembourrage à des fins de formatage, et est-ce important ?

J'ai lutté pendant très longtemps à la recherche de réponses appropriées. Et ce n'est qu'après avoir écrit beaucoup de code CSS terrible et illisible, accompagné de divers effets secondaires, que j'ai pu affirmer avec confiance que j'avais trouvé les règles fondamentales à toute épreuve concernant les problèmes énumérés ci-dessus.

Pour illustrer, examinons une situation typique qui est probablement familière à tous les développeurs d'interface utilisateur en 2017. Nous avons le modèle de carte le plus simple.

Dans cet exemple, deux types d'intervalles peuvent être distingués :

Il est très important de comprendre ici que nous avons affaire à deux concepts différents, qui ne doivent pas être interconnectés lors de la liaison. Autrement dit, si je dois modifier la distance entre les cartes et leur conteneur, par exemple jusqu'à 24 pixels, cela ne devrait en aucun cas affecter l'espacement entre les cartes elles-mêmes.

Mettre en œuvre un exemple avec CSS ?

Il existe littéralement des milliers de façons de créer un tel modèle à l'aide de marges et de remplissage, mais j'aimerais vous en présenter une, qui démontre l'utilisation correcte des propriétés de marge et de remplissage. De plus, cette méthode vous permet d'ajouter d'autres cartes ultérieurement.

Récipient(
rembourrage : 16px
}
.carte + .carte(
marge : 0 0 0 8px ;
}

Juste 2 sélecteurs et 2 règles.

Quelle est la fonction du signe plus ?

Symbole + représente sélecteur adjacent. Il pointe uniquement vers l'élément suivant immédiatement l'élément spécifié avant ce sélecteur.

Comme vous pouvez le voir sur l'image ci-dessus, dans notre cas, ce sélecteur sélectionnera chaque carte précédée de toutes les autres cartes. Ainsi, avec le sélecteur adjacent, nous pouvons définir la marge de gauche pour chaque carte sauf la première.

Cela signifie que nous avons la possibilité d'ajouter n'importe quel nombre de cartes dont nous avons besoin, la distance entre elles sera toujours de huit pixels.

Tout fonctionne bien jusqu'à ce que nous ayons besoin de placer autre chose qu'une carte à côté des cartes. Eh bien, disons un bouton "Ajouter une carte" ("Ajouter une carte"):

Sur la base de l'extrait CSS que nous avons déjà, nous ne donnerions probablement pas au nouvel élément qui représente le bouton une classe .card, car ce n'est pas une carte. Comment être? Vaut-il la peine de créer un nom de classe supplémentaire .add-card , qui contient la même règle avec une propriété margin que la classe .card ? Non, il existe une meilleure solution.

Chouette lobotomisée *+* .

Et à quoi ça ressemble. Malgré l'association amusante, cette méthode fonctionne très bien et je l'utilise tout le temps depuis que je l'ai découverte. Alors, à quoi tout cela sert-il ? Voici un aperçu du code CSS correspondant :

Récipient(
rembourrage : 16px
}
/* Eh bien, avez-vous reconnu la chouette lobotomisée ? */
.container > * + * (
marge : 0 0 0 8px ;
}

Comme vous vous en souvenez probablement, le sélecteur précédent s'appliquait à toute carte précédée d'une autre carte. Maintenant, avec son aide, nous pouvons formater chaque élément immédiatement précédé de tout autre élément, y compris le bouton, bien sûr.

Finalement.

J'espère sincèrement que le matériel présenté ici vous a aidé à déterminer quand utiliser le rembourrage pour séparer le contenu contenu dans le conteneur et quand utiliser les marges.

En conclusion, je voudrais présenter à votre attention un projet de stylo qui illustre les exemples ci-dessus, ainsi que deux règles qui ont été testées par ma propre expérience. Ainsi, nous utilisons :

rembourrage- pour les espaces entre le contenant et son contenu.

marge- pour les espaces entre les éléments à l'intérieur du conteneur.

Vues des publications : 427

La description

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

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

Syntaxe

rembourrage : [valeur | pour cent] (1, 4) | hériter

Valeurs

Il est permis d'utiliser une, deux, trois ou quatre valeurs en les séparant par un espace. L'effet dépend du nombre de valeurs et est donné dans le tableau. une.

Les marges peuvent être spécifiées en pixels (px), en pourcentages (%) ou en d'autres unités compatibles CSS. La valeur d'héritage indique qu'elle est héritée du parent. Lorsque vous spécifiez une marge en pourcentage, la valeur est calculée à partir de la largeur du parent de l'élément.

HTML5 CSS2.1 IE Cr Op Sa Fx

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

Riz. 2. Appliquer la propriété padding

Modèle d'objet

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

Navigateurs

Internet Explorer jusqu'à la version 7.0 ne prend pas en charge la valeur d'héritage.

Shastaya sur les forums est tombé sur le fait que la question se pose toujours, qu'est-ce que rembourrage, et quoi marge et quelles sont les différences entre eux. C'est pourquoi j'ai décidé de le rappeler. Alors, sans recourir à des phrases abstruses, fixons-nous la tâche et analysons un exemple sur lequel tout deviendra clair.

Tâche: Sur la page besoin d'un bloc rouge(200x200 pixels), qui s'éloigne des bords du navigateur en haut et à gauche de 40 et 70 pixels respectivement, et le texte à l'intérieur duquel les retraits partent de la gauche et du haut par 40 pixels.

Décision: regardez l'image et le code. Notre bloc rouge ne doit pas dépasser 200 x 200 pixels, et il doit être rempli à partir des bords du navigateur (ou d'autres blocs de contenu). En fait, nous faisons ces retraits à travers la marge. Si nous faisons du rembourrage, alors le rembourrage se produit à l'intérieur de notre bloc rouge et le rembourrage est obtenu avec l'arrière-plan du bloc lui-même (c'est-à-dire le rouge).

En plus des propriétés utilisées (lignes 6-9), il y a aussi les propriétés margin-right, padding-right, margin-bottom, padding-bottom - elles sont respectivement pour les retraits à droite et en bas. Les valeurs de toutes ces propriétés peuvent être en pixels (px), en pourcentages (%), ou en unités em.

En gros, c'est ça. Cependant, il existe d'autres fonctionnalités de travail avec eux.

Caractéristiques de la marge et du rembourrage

Lorsque vous utilisez un rembourrage, les dimensions du rembourrage doivent être soustraites de la hauteur et de la largeur du bloc, sinon la taille du bloc augmentera de la taille du rembourrage.

Si vous définissez margin-left et margin-right avec des valeurs automatiques pour certains blocs, alors si le bloc a une largeur fixe (par exemple 400px) et qu'il n'y a pas de propriété CSS float, alors ce bloc sera aligné au centre de l'élément dans lequel il se trouve. En fait, pour une disposition sans caoutchouc avec alignement central, cette méthode d'alignement est généralement utilisée. Même si IE 5.5 et les versions antérieures ne prennent pas en charge la valeur auto, cela ne vous empêche pas de l'utiliser tout le temps =).

Il n'est pas recommandé d'utiliser le rembourrage et la marge dans les tableaux car l'effet sera imprévisible dans différents navigateurs.

Et la dernière chose que je voulais dire. N'oubliez pas d'utiliser des constructions de publication abrégées telles que margin: 10px 0 5px 20px;. Si l'indentation est zéro, vous pouvez simplement mettre un zéro, sans spécifier de paramètres. Il est très facile de se rappeler lequel des paramètres appartient à quelle bordure - pour le bloc, les retraits vont dans le sens des aiguilles d'une montre : le premier chiffre est en haut, le deuxième à droite, le troisième en bas, le quatrième en bas la gauche.

C'est en fait tout ce que je voulais vous dire aujourd'hui. Bon weekend tout le monde!

La propriété CSS padding est chargée de définir le rembourrage à l'intérieur de l'élément à partir de sa bordure.

Remplissage de syntaxe CSS

rembourrage : en haut à droite en bas à gauche ;

• top - retrait à partir de la bordure supérieure de l'élément ;
• right - retrait à partir du bord droit de l'élément ;
• bas - retrait à partir de la bordure inférieure de l'élément ;
• gauche - retrait à partir de la bordure gauche de l'élément ;

Les valeurs sont le plus souvent spécifiées en pixels. Les pourcentages et autres unités CSS acceptables sont également autorisés.

Note 1
Plus de quatre valeurs sont autorisées. Selon le nombre de valeurs, les actions seront différentes :

• Si 3 valeurs sont données, la première valeur définit le retrait par le haut, la seconde - à gauche et à droite, et la troisième - en bas
• Si 2 valeurs sont données, la première valeur définit le retrait du haut et du bas, la seconde - à gauche et à droite du contenu
• Si 1 valeur est définie, l'indentation est définie sur la même indentation pour tous les côtés. Par example:

rembourrage : 10px 10px 10px 10px ; Vous pouvez le définir de manière plus compacte : rembourrage : 10px

Note 2
Contrairement à la propriété CSS margin, les valeurs de remplissage négatives ne sont pas autorisées.

Le rembourrage a également 4 propriétés CSS distinctes. Chacun d'eux est responsable d'une certaine direction.

• padding-left - remplissage à partir de la bordure gauche de l'élément ;
• padding-right - remplissage à partir du bord droit de l'élément ;
• padding-top - remplissage à partir de la bordure supérieure de l'élément ;
• padding-bottom - remplissage à partir de la bordure gauche de l'élément ;

par exemple

rembourrage : 3px 5px 7px 10px ; Ou vous pouvez spécifier en détail : padding-gauche : 10px ; padding-right : 5px ; padding-top : 3px ; rembourrage en bas : 7px ;

Exemples avec différents retraits dans un élément

Exemple 1 : Indenter du texte dans une balise

Пример с нулевыми отступам (padding: 0px)

Пример с одинаковым отступом от всех границ (padding: 10px)

Пример с разными отступам (padding: 10px 0px 0px 30px)

Вот как это выглядит на странице:

Пример с нулевыми отступам (padding: 0px)

Пример с одинаковым отступом от всех границ (padding: 10px)

Пример с разными отступам (padding: 10px 0px 0px 30px)

Пример 2. Отступ объекта внутри объекта