Maison > Article > interface Web > Comment ajouter de l'espace entre les éléments ?
Comment ajouter de l'espace entre les éléments ?
- WBOYavant
- 2023-09-15 23:21:03936parcourir
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 -
suivantdiv {
margin-bottom: 10px;
}
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;
}
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>
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>
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!