Utiliser la marge et le remplissage en CSS

1. Introduction de Margin dans CSS
2. Introduction du remplissage en CSS

La marge et le remplissage peuvent sembler similaires en CSS, mais ils sont différents. Ce tutoriel présentera la marge et le remplissage en CSS. Ensuite, nous connaîtrons la différence entre eux et apprendrons quand utiliser la marge et le remplissage.

Introduction de Margin dans CSS

En CSS, la marge est l’espace entre deux éléments adjacents. C’est l’espace entre la frontière des deux éléments adjacents. La marge d’un élément ne contrôle pas l’espace à l’intérieur de l’élément. Au contraire, il est responsable de l’espace juste à l’extérieur de l’élément. Nous utilisons la propriété margin pour spécifier la marge des quatre côtés de l’élément. Nous écrivons quatre valeurs dans la propriété margin. Les valeurs représentent, dans l’ordre, margin-top, margin-right, margin-bottom et margin-left. Nous pouvons illustrer comme suit.

element {
margin: 20px 20px 20px 20px;
}

Le code ci-dessus définit la marge 20px d’un élément des quatre côtés.

Lorsque nous n’utilisons que les trois valeurs, la valeur du milieu représente les propriétés margin-left et margin-right. Si la propriété margin n’a que deux valeurs, la première valeur représente la marge en haut et en bas, et la seconde représente la marge à gauche et à droite. Une valeur de marge unique représente la marge des quatre côtés.

Maintenant, montrons ce qu’est une marge. Par exemple, créez deux div avec redbox et bluebox comme classes. Donnez height et width de 200px à chacune des classes. Réglez la background-color des cases sur red et blue. Ensuite, définissez la propriété margin-bottom de la redbox, la top box, sur 20px.

L’exemple ci-dessous crée deux boîtes de couleurs rouge et bleue. La propriété margin-bottom fournit un espace de 20px à partir du bord de la boîte rouge dans la direction du bas. Cela signifie que la boîte bleue aura une distance de 20px de la boîte rouge. Si nous supprimons la propriété margin-bottom, l’espace sera supprimé et les deux boîtes s’attacheront. Notez que les textes dans les deux cases sont attachés à la bordure des cases sans espaces à gauche et en haut.

Exemple de code :

<div class="redbox"> Red Box </div>
<div class="bluebox"> Blue Box </div>

.redbox {
 height:200px;
 width: 200px;
 background-color:red;
 margin-bottom:20px;
}

.bluebox {
 height:200px;
 width: 200px;
 background-color:blue;
 color:white;
}

Nous pouvons utiliser la marge CSS si nous voulons changer la position d’un élément dans notre page Web. En utilisant la propriété margin, nous pouvons déplacer l’élément vers la gauche, la droite, le haut et le bas. Une autre utilisation de la marge vient lorsque nous devons spécifier la distance entre deux éléments voisins. Nous l’avons illustré dans l’exemple ci-dessus. Nous pouvons même utiliser la valeur de marge négative dans les éléments pour créer un effet de chevauchement. Ce sont quelques cas d’utilisation de marge CSS.

Introduction du remplissage en CSS

Le remplissage est l’espace entre la bordure d’un élément et le contenu de l’élément. C’est l’espace à l’intérieur d’un élément, et il n’a aucun contrôle sur la zone à l’extérieur de l’élément. Nous utilisons la propriété padding pour définir le remplissage d’un élément. Nous pouvons utiliser quatre valeurs, trois valeurs, deux valeurs et une seule valeur pour représenter le remplissage d’un élément. La représentation du remplissage est similaire à la représentation des marges en termes de directions. Nous pouvons illustrer comme suit.

margin: 20px 20px 20px 20px;

Le code ci-dessus définit le rembourrage de 20px dans toutes les directions.

Montrons maintenant l’utilisation pratique du remplissage CSS avec un exemple. Nous utiliserons ici la même structure HTML que ci-dessus. En CSS, sélectionnez le div et donnez la hauteur et la largeur de 200px et le padding-top de 50px. Sélectionnez les classes individuelles et donnez-leur la valeur respective pour la propriété background-color.

Dans l’exemple ci-dessous, les deux cases sont jointes, contrairement à l’exemple de marge ci-dessus. Mais, nous pouvons voir de l’espace au-dessus de chaque texte dans les deux cases. C’est ce que fait le rembourrage. La définition de la propriété padding-top sur 20px a ajouté un espace de 50px entre le texte et le haut de la boîte.

Exemple de code :

<div class="redbox"> Red Box </div>
<div class="bluebox"> Blue Box </div>

div{
 height:200px;
 width: 200px;
 padding-top:50px;
}
.redbox {
 background-color:red;
}

.bluebox {
 background-color:blue;
 color:white;
}

Nous pouvons utiliser le remplissage CSS pour spécifier l’espace entre le contenu d’un élément et sa bordure. Nous pouvons également utiliser le remplissage pour augmenter la taille de l’élément. Lorsque nous augmentons la valeur de remplissage, l’espace entre le contenu et la bordure augmente. En conséquence, la taille de l’élément augmentera également, en gardant la taille du contenu constante.