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:541701parcourir

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.

Comment rendre les blocs sans interruption en CSS

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 :

Comment rendre les blocs sans interruption en CSS

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 :

Comment rendre les blocs sans interruption en CSS

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 :

Comment rendre les blocs sans interruption en CSS

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!

Déclaration:
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