Dans cet article, nous discuterons de la propriété des éléments de bloc en ligne. C'est une propriété très utile du CSS. Nous pouvons l'appliquer à différentes balises. Cela fait partie de la propriété d'affichage CSS.
classe abstraite vs interface
Usage:
display: inline-block
En appliquant la propriété ci-dessus, l'élément se comportera comme un élément en ligne et un bloc pour ses éléments enfants. Comprenons les éléments en ligne et en bloc.
Éléments en ligne
Les éléments qui ne commencent pas sur une nouvelle ligne sont appelés éléments en ligne. Ils sont combinés dans le cadre du texte principal et non comme une action distincte. Ces éléments n'occupent que l'espace requis. Des espaces à gauche et à droite peuvent être ajoutés à un élément en ligne, mais il ne peut pas être ajouté de hauteur au remplissage ou à la marge supérieure ou inférieure d'un élément en ligne.
Exemple d'éléments en ligne :
Exemple:
Page Title .highlight{ background-color:#efefef} It is a demo span <span>inline element</span>; whose span is an highlighted with a grey color indicating that it is an inline tag Sortir:
bélier pothineni
Éléments de bloc
Les éléments qui commencent sur une nouvelle ligne sont appelés éléments de bloc. Un élément de bloc acquiert toute la largeur disponible pour ce contenu. Contrairement à l'inline, il existe une marge supérieure et inférieure pour ces éléments. Les éléments de niveau bloc ne peuvent apparaître qu’à l’intérieur de la balise body. Les éléments au niveau bloc créent une structure plus grande que les éléments en ligne.
Exemple d'éléments de bloc :
,
trier une liste de tableaux java
Exemple:
Page Title p { background-color: #8A55; } <p>This paragraph is a block-level element; its background has been colored to display the paragraph's parent element.</p> Sortir:
Éléments de bloc en ligne
La valeur d'affichage de inline-block fonctionne de la même manière que inline à une exception près : la hauteur et la largeur de cet élément deviennent modifiables.
Exemple:
apprentissage automatique supervisé
span.b { display: inline-block; width: 100px; height: 100px; padding: 5px; color:white; border: 1px solid blue; background-color: blue; } This is an example of inline-block element with a span colored as blue <span>Inline-Block</span> Sortir:
Vous trouverez ci-dessous le fichier de sortie utilisant tous les éléments sur une seule page :
Code
span.a { display: inline; /* the default for span */ width: 100px; height: 100px; padding: 5px; border: 1px solid white; background-color: blue; } span.b { display: inline-block; width: 100px; height: 100px; padding: 5px; border: 1px solid white; background-color: green; } span.c { display: block; width: 70px; height: 50px; padding: 5px; border: 1px solid blue; background-color: pink; } <h2>display: inline</h2> This is section with a inline span made blue <span>inline</span> <span>element</span> <h2>display: block</h2> This is section with a block span made pink <span>block</span> <span>element</span> . <h2>display: inline-block</h2> This is section with a inline block span made green<span>inline</span> <span>block</span>