Une brève discussion sur la différence entre les éléments de bloc et les éléments en ligne

Les éléments de balise en HTML sont généralement divisés en trois types différents : les éléments de bloc, les éléments en ligne (également appelés éléments en ligne) et les éléments de bloc en ligne. Alors, quelle est la différence entre les éléments de bloc et les éléments en ligne ? Laissez-moi vous le présenter ci-dessous.

Éléments en ligne

En html, , , des balises telles car et

sont des éléments en ligne typiques. Bien entendu, les éléments de bloc peuvent également être affichés en tant qu'éléments en ligne en définissant display: inline;, de sorte que les éléments de niveau bloc aient les caractéristiques des éléments en ligne.

p{
  display:inline;
}
...<p>我要变成内联元素！</p>

Caractéristiques des éléments en ligne :

1. Sur la même ligne que les autres éléments, pas sur une ligne exclusive

<.>2. La hauteur, la largeur et les marges supérieure et inférieure de l'élément

ne peuvent pas être définies

(ps : les attributs margin-top et margin-bottom de l'élément en ligne ne le sont pas ; work , et les attributs margin-left et margin-right peuvent également fonctionner. Les attributs padding top, bottom, left et right peuvent également fonctionner,

, mais l'attribut padding-top ne peut atteindre que le haut du navigateur <.>, padding- top est plus haut que le haut du navigateur et l'élément ne descendra pas. Vous pouvez utiliser le padding lors de l'ajout d'un arrière-plan à un élément en ligne, mais la couleur d'arrière-plan couvrira les éléments environnants) 3. La largeur de l'élément est l'image contenue dans l'élément. Ou la largeur du texte, qui ne peut pas être définie

*

 : Des espaces apparaîtront lorsqu'il y aura des "chariots" ; renvoie", "tabulations" et "espaces" entre les éléments en ligne. Solution : Écrivez-le sur une seule ligne, sans espaces, retours chariot ou autres symboles au milieu.

Éléments de bloc en html

,

,

,

, < ul> et

Les éléments en ligne peuvent être affichés sous forme d'éléments de bloc en définissant

display:block

; Par exemple : a{display:block;}

Caractéristiques des éléments de niveau bloc :

1. Chaque élément de bloc commence sur un nouveau. line Start, et les éléments suivants commenceront également sur une nouvelle ligne (

Ligne exclusive

2) La hauteur, la largeur, la hauteur de la ligne, les marges supérieure et inférieure de l'élément peuvent être. set;

3. Si la largeur de l'élément n'est pas définie, elle représentera 100 % de son conteneur parent (la même que la largeur de l'élément parent

Éléments de bloc en ligne

Le bloc en ligne a les caractéristiques à la fois des éléments en ligne et des éléments de bloc

, et le code

is Définit l'élément en tant qu'élément de bloc en ligne. Les balises et sont de telles balises de bloc en ligne. display:inline-blockCaractéristiques des éléments de bloc en ligne :

1 Sur la même ligne que les autres éléments

2. la hauteur de l'élément ainsi que les marges supérieure et inférieure peuvent être définies.

Apprentissage recommandé :

Tutoriel vidéo HTML

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!