Comment rendre les blocs sans interruption en CSS-Questions et réponses frontales-php.cn

Comment rendre les blocs sans interruption en CSS

藏色散人

Libérer： 2023-01-03 09:31:03

original

1723 Les gens l'ont consulté

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>

Copier après la connexion

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>

Copier après la connexion

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>

Copier après la connexion

L'effet est le suivant :

Comment rendre les blocs sans interruption en CSS