Comment définir l'espacement en CSS

CSS fait partie intégrante de la conception Web. Il peut contrôler le style, la mise en page et les effets interactifs des pages Web. Parmi eux, définir l’espacement entre les éléments est l’une des fonctions importantes du CSS. Cet article explique comment définir l'espacement en CSS et utiliser différentes méthodes pour ajuster la distance entre les éléments.

1. Espacement en CSS

En CSS, la marge et le remplissage sont généralement utilisés pour définir la distance entre les éléments. Les deux propriétés contrôlent l'espace blanc autour de la bordure d'un élément, mais elles font des choses différentes.

1. Marge

la marge fait référence à l'espacement externe autour de l'élément. C'est la distance entre l'élément et les autres éléments. La marge peut avoir quatre valeurs, représentant respectivement l'espacement dans les directions haut, droite, bas et gauche. Elle peut également avoir deux valeurs représentant l'espacement entre le haut, le bas et la gauche. valeur représentant la même distance dans les quatre directions.

Par exemple, le code suivant signifie définir l'espacement supérieur et inférieur autour de l'élément h1 à 20 pixels, et l'espacement gauche et droit à 30 pixels.

h1 {
  margin: 20px 30px;
}

2. Padding

padding fait référence à l'espacement interne autour de l'élément. C'est la distance entre le contenu de l'élément et la bordure. Le remplissage peut également avoir quatre valeurs, représentant respectivement l'espacement vers le haut, la droite, le bas et la gauche, ou il peut avoir une seule valeur. représentant la même distance dans les quatre directions.

Par exemple, le code suivant définit l'espacement supérieur et inférieur autour de l'élément div à 20 pixels et l'espacement gauche et droit à 30 pixels.

div {
  padding: 20px 30px;
}

2. Précautions d'utilisation de la marge et du remplissage

1. Modèle de boîte

Lors de la définition de la marge et du remplissage des éléments, vous devez faire attention à l'influence du modèle de boîte. Le modèle de boîte divise les éléments en quatre parties : zone de contenu, zone de remplissage, zone de bordure et zone de marge. Lors du réglage de l'espacement des éléments, tenez compte de l'influence de ces quatre éléments.

2. Imbrication d'éléments

Dans le cas d'imbrication d'éléments, la valeur de marge de l'élément enfant et la valeur de marge de l'élément parent peuvent s'influencer mutuellement. C'est là que des techniques supplémentaires sont nécessaires pour contrôler l'espacement.

Par exemple, le code ci-dessous montre un élément parent et deux éléments enfants. Disons que les éléments enfants doivent être espacés de 20 pixels, mais en raison de la marge, la distance entre eux sera plus grande.

<div>
  <p>Child element 1</p>
  <p>Child element 2</p>
</div>

div {
  background-color: #ccc;
  margin: 50px;
  padding: 20px;
}

p {
  background-color: #eee;
  margin: 20px;
}

Afin de contrôler la distance entre les éléments enfants, vous pouvez utiliser des valeurs de marge négatives pour décaler la valeur de marge de l'élément parent, comme le code suivant :

p:first-child {
  margin-top: 0;
}

p:last-child {
  margin-bottom: 0;
}

div {
  background-color: #ccc;
  margin: 50px;
  padding: 20px;
}

p {
  background-color: #eee;
  margin: 20px 0;
}

p + p {
  margin-top: -20px;
}

Cela peut maintenir une distance de 20 pixels entre les éléments enfants éléments.

3. Utilisez d'autres méthodes pour ajuster l'espacement des éléments

En plus d'utiliser les attributs de marge et de remplissage, vous pouvez également utiliser d'autres méthodes pour ajuster l'espacement des éléments.

1. Positionnement

Utilisez l'attribut position et les quatre valeurs​​haut, droite, bas et gauche pour contrôler la position de l'élément. Le positionnement vous permet d'ajuster l'espacement entre les éléments.

Par exemple, le code suivant signifie que la distance entre deux éléments est de 50 pixels.

div:nth-child(2) {
  position: relative;
  top: 50px;
}

2. Hauteur de ligne

La hauteur de ligne fait référence à la hauteur de la ligne de texte et peut également être utilisée pour contrôler l'espacement entre les éléments. Pour définir la hauteur d'une ligne de texte, utilisez la propriété line-height.

Par exemple, le code ci-dessous définit la hauteur de ligne entre deux éléments à 40 pixels.

div {
  line-height: 40px;
}

3. Float

Utilisez l'attribut float pour faire flotter un élément vers une position entre lui et d'autres éléments. Flottant vous permet d'ajuster l'espacement entre les éléments.

Par exemple, le code ci-dessous fait flotter les deux éléments vers la gauche et définit la distance entre eux à 20 pixels.

div {
  float: left;
  margin-right: 20px;
}

4. Résumé

Définir l'espacement entre les éléments est une fonction importante en CSS. L'espacement extérieur et intérieur des éléments peut être facilement ajusté à l'aide des propriétés de marge et de remplissage. Lorsque vous utilisez ces deux propriétés, vous devez faire attention à l'impact du modèle de boîte et de l'imbrication des éléments. De plus, le positionnement, la hauteur des lignes et le flottement peuvent également être utilisés pour ajuster l'espacement entre les éléments. Les développeurs peuvent choisir différentes méthodes en fonction de leurs besoins pour obtenir la disposition cible.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!