Maison > Article > interface Web > Comment rendre les blocs sans interruption en CSS
Comment rendre les blocs sans interruption en CSS
- 藏色散人original
- 2021-03-22 16:09:541708parcourir
Comment implémenter CSS pour créer des blocs sans espaces : créez d'abord un exemple de fichier HTML ; puis définissez un élément en ligne comme élément de bloc en ligne et enfin supprimez les espaces entre les balises.
L'environnement d'exploitation de cet article : système Windows 7, version HTML5&&CSS3, ordinateur DELL G3
Lors de la création récente de pages mobiles, inline- est Les éléments Block souvent utilisés sont utilisés pour la mise en page, mais inévitablement un problème sera rencontré, qui est l'écart entre les éléments de bloc en ligne. Ces espaces entraîneront des problèmes de mise en page et devront être supprimés. Voici un bref résumé des éléments des blocs en ligne et des méthodes permettant de supprimer les espaces.
Remarque : En HTML, div, p, hx, form, ul, li, dl et dd sont des éléments de niveau bloc.
Qu'est-ce que le bloc en ligne ?
inline-block est un bloc en ligne, qui peut être divisé en trois types dans la classification des éléments CSS : les éléments en ligne ou éléments en ligne, les éléments de niveau bloc et les éléments de bloc en ligne.
Les éléments de bloc en ligne ont les caractéristiques des éléments en ligne et des éléments de niveau bloc : (1) les éléments peuvent être disposés horizontalement (2) peuvent être utilisés comme éléments de niveau bloc pour définir divers attributs, tels que : la largeur , hauteur, rembourrage, etc.
Exemple 1 : Définir un élément span en ligne en tant qu'élément de bloc en ligne
<!DOCTYPE html >
<html>
<head>
<style type="text/css">
div{
background: red;
display:inline-block;
}
</style>
</head>
<body>
<div>这是一个div</div>
<div>这是一个div</div>
<div>这是一个div</div>
</body>
</html>L'effet est le suivant :
Supprimer en ligne -block Méthodes pour provoquer des espaces dans les divs :
1. Supprimez les espaces entre les étiquettes
La raison des espaces entre les éléments est les espaces entre les étiquettes des éléments. Si vous supprimez les espaces, les espaces. disparaîtra naturellement.
<!DOCTYPE html >
<html>
<head>
<style type="text/css">
div{
background: red;
display:inline-block;
}
</style>
</head>
<body>
<div>这是一个div</div><div>这是一个div</div><div>这是一个div</div>
</body>
</html>L'effet est le suivant :
2. Mettez tous les divs dans le même div
<!DOCTYPE html >
<html>
<head>
<style type="text/css">
div{
background: red;
display:inline-block;
}
</style>
</head>
<body>
<div>
<div>这是一个div</div>
<div>这是一个div</div>
<div>这是一个div</div>
</div>
</body>
</html>L'effet est le suivant :
3. Résolvez ce problème en définissant la taille de police :0 de l'élément parent
Cette méthode convient aux divs qui contiennent uniquement des images.
[Étude recommandée : tutoriel vidéo CSS]
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!