Comment ajouter de l'espace entre les éléments ?-tutoriel HTML-php.cn

Comment ajouter de l'espace entre les éléments ?

WBOY

Libérer： 2023-09-15 23:21:03

avant

943 Les gens l'ont consulté

Comment ajouter de lespace entre les éléments ?

Dans les pages Web HTML, l'espace entre les éléments fait référence à la zone autour et entre différents éléments, tels que le texte, les images et d'autres éléments HTML. Il existe de nombreuses façons d’ajouter de l’espace entre les éléments dans la conception Web. Une approche courante consiste à utiliser CSS (Cascading Style Sheets) pour créer des marges et un remplissage autour des éléments.

Ajoutez des espaces entre les éléments HTML en utilisant CSS

La conception Web nécessite souvent d'ajouter de l'espace entre les éléments pour créer une mise en page visuellement agréable et améliorer la lisibilité.

La conception Web propose de nombreuses façons d’ajouter de l’espace entre les éléments. Une approche courante consiste à utiliser CSS (Cascading Style Sheets) pour créer des marges et un remplissage autour des éléments. La marge est l'espace à l'extérieur de l'élément, tandis que le remplissage est l'espace à l'intérieur de l'élément. Pour ajouter de l'espace entre deux éléments, on peut utiliser la propriété margin sur l'un des éléments.

Par exemple, si nous avons deux divs, nous pouvons ajouter un espace entre eux en utilisant le CSS -

div {
   margin-bottom: 10px;
}

Copier après la connexion

Cela ajoutera 10 pixels d'espace entre chaque div.

En utilisant le remplissage, nous pouvons également ajouter de l'espace entre les éléments. Le remplissage fonctionne de la même manière que les marges, mais il affecte l'espace à l'intérieur de l'élément plutôt que l'espace à l'extérieur.

Par exemple, si nous avons un div avec du texte à l'intérieur, nous pouvons utiliser le CSS suivant pour ajouter un espace entre le texte et le bord du div -

div {
   padding: 20px;
}

Copier après la connexion

Cela ajoutera 20 pixels de remplissage autour des quatre côtés du div.

Exemple

Dans cet exemple, nous utilisons la propriété margin-top.

<!DOCTYPE html>
<html>
<head>
   <style>
      body{
         text-align:center;
         background-color:pink;
      }
      .div1{
         margin:auto;
         background: #6ffc03;
         border: 1px solid black;
         width: 250px;
         height: 200px;
      }
      button{
         margin-top: 20px;
      }
   </style>
</head>
<body>
   <div class="div1">
      <button>Button 1</button><br>
      <button>Button 2</button>
   </div>
</body> 
</html>

Copier après la connexion

Exemple

Dans cet exemple, nous utilisons la propriété padding.

<!DOCTYPE html>
<html>
<head>
   <style>
      body{
         text-align:center;
         background-color:pink;
      }
      .div2{
         background: #6ffc03;
         border: 1px solid black;
         padding:30px;
         width: 250px;
         height: 250px;
      }
   </style> 
</head>
<body>
   <div class="div2">Padding 30</div>
</body>
</html>

Copier après la connexion

Conclusion

Pour ajouter de l'espace entre les éléments dans la conception Web, nous utilisons des marges et un remplissage en CSS. Ces propriétés peuvent être utilisées pour créer un espacement cohérent autour d'un élément et contrôler la taille de l'élément et son espace. Les propriétés box-sizing, grid-gap et gap peuvent également être utilisées pour contrôler la taille des éléments et leur espace.

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!