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

Table des matières

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

Exemple

Conclusion

Maison

interface Web

tutoriel HTML

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

Sep 15, 2023 pm 11:21 PM

ajouter un intervalle espacement des éléments Définir le rembourrage

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!

Déclaration de ce site Web

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article chaud

R.E.P.O. Crystals d'énergie expliqués et ce qu'ils font (cristal jaune)

1 Il y a quelques semaines By 尊渡假赌尊渡假赌尊渡假赌

Repo: Comment relancer ses coéquipiers

3 Il y a quelques semaines By 尊渡假赌尊渡假赌尊渡假赌

Hello Kitty Island Adventure: Comment obtenir des graines géantes

3 Il y a quelques semaines By 尊渡假赌尊渡假赌尊渡假赌

Combien de temps faut-il pour battre Split Fiction?

3 Il y a quelques semaines By DDD

Difficulté à mettre à jour la mise en cache des pages Web officielles du compte: comment éviter l'ancien cache affectant l'expérience utilisateur après la mise à jour de la version?

3 Il y a quelques semaines By 王林

Afficher plus

Outils chauds Tags

Code&IT

Voix

Entreprise

Commercialisation

Détecteur d'IA

Chatbot

Conception et art

Article chaud

R.E.P.O. Crystals d'énergie expliqués et ce qu'ils font (cristal jaune)

1 Il y a quelques semaines By 尊渡假赌尊渡假赌尊渡假赌

Repo: Comment relancer ses coéquipiers

3 Il y a quelques semaines By 尊渡假赌尊渡假赌尊渡假赌

Hello Kitty Island Adventure: Comment obtenir des graines géantes

3 Il y a quelques semaines By 尊渡假赌尊渡假赌尊渡假赌

Combien de temps faut-il pour battre Split Fiction?

3 Il y a quelques semaines By DDD

Difficulté à mettre à jour la mise en cache des pages Web officielles du compte: comment éviter l'ancien cache affectant l'expérience utilisateur après la mise à jour de la version?

3 Il y a quelques semaines By 王林

Afficher plus

Tags d'article chaud

Bloc-notes++7.3.1

Éditeur de code facile à utiliser et gratuit

SublimeText3 version chinoise

Version chinoise, très simple à utiliser

Envoyer Studio 13.0.1

Puissant environnement de développement intégré PHP

Dreamweaver CS6

Outils de développement Web visuel

SublimeText3 version Mac

Logiciel d'édition de code au niveau de Dieu (SublimeText3)

Afficher plus

Sujets chauds

Où se trouve l'entrée de connexion pour la messagerie Gmail ?

7308

Tutoriel Java

1623

Tutoriel CakePHP

1344

Tutoriel Laravel

1259

Tutoriel PHP

1207

Afficher plus

Related knowledge

Difficulté à mettre à jour la mise en cache des pages Web officielles du compte: comment éviter l'ancien cache affectant l'expérience utilisateur après la mise à jour de la version? Mar 04, 2025 pm 12:32 PM

Difficulté à mettre à jour la mise en cache des pages Web officielles du compte: comment éviter l'ancien cache affectant l'expérience utilisateur après la mise à jour de la version?

Comment utiliser les attributs de validation du formulaire HTML5 pour valider l'entrée utilisateur? Mar 17, 2025 pm 12:27 PM

Comment utiliser les attributs de validation du formulaire HTML5 pour valider l'entrée utilisateur?

Comment ajouter efficacement les effets de course aux images PNG sur les pages Web? Mar 04, 2025 pm 02:39 PM

Comment ajouter efficacement les effets de course aux images PNG sur les pages Web?

Quel est le but du & lt; iframe & gt; étiqueter? Quelles sont les considérations de sécurité lorsque vous l'utilisez? Mar 20, 2025 pm 06:05 PM

Quel est le but du & lt; iframe & gt; étiqueter? Quelles sont les considérations de sécurité lorsque vous l'utilisez?

Quel est le but du & lt; datalist & gt; élément? Mar 21, 2025 pm 12:33 PM

Quel est le but du & lt; datalist & gt; élément?

Quel est le but du & lt; mètre & gt; élément? Mar 21, 2025 pm 12:35 PM

Quel est le but du & lt; mètre & gt; élément?

Quelles sont les meilleures pratiques pour la compatibilité entre les navigateurs dans HTML5? Mar 17, 2025 pm 12:20 PM

Quelles sont les meilleures pratiques pour la compatibilité entre les navigateurs dans HTML5?

Quelles sont les implications de sécurité de l'utilisation des iframes et comment puis-je les atténuer? Mar 18, 2025 pm 02:51 PM

Quelles sont les implications de sécurité de l'utilisation des iframes et comment puis-je les atténuer?

See all articles