Bloc en ligne CSS

Chaque élément de HTML est traité comme une boîte dans le navigateur Web. C'est pourquoi leur affichage sur un navigateur Web est considérablement important et affecte la mise en page. Cependant, CSS propose deux types de boîtes, en ligne et en bloc. Vous pouvez utiliser l'un d'eux en fonction du flux de la page et en ce qui concerne les autres boîtes de la page.

Ce blog vous guidera sur le CSS en ligne et les éléments de blocage affichage. Alors, commençons!

Quelles sont les valeurs de propriété affichent CSS?

Trois valeurs de la propriété d'affichage CSS sont répertoriées ci-dessous:

• bloc: Les éléments de bloc commencent sur une nouvelle ligne et remplissent toute la largeur, de gauche à droite.
• en ligne: Les éléments en ligne apparaissent sur la même ligne.
• bloc en ligne: La valeur de la propriété de blocage en ligne est comme la valeur en ligne, mais elle fournit également des propriétés de marge et de rembourrage à l'élément.

Élaborons chacun d'eux à travers un exemple un par un!

Exemple

Dans le fichier html, ajouter

élément pour fournir du contenu au navigateur Web.

Html

Meilleurs tutoriels CSS

Propriété d'affichage: bloc

Le "bloc”Affichage emmène l'élément sur la nouvelle ligne et occupe toute la largeur de la page. Si vous souhaitez modifier sa taille, utilisez les propriétés de largeur et de hauteur de CSS.

Maintenant, dans CSS, appliquez le «afficher”Valeur de propriété définie comme"bloc«Au paragraphe supplémentaire et affectez le«frontière" comme "RVB solide 5px (204, 13, 172)". La bordure signifie le comportement des propriétés d'affichage.

CSS

L'image fournie ci-dessous indique le comportement de la propriété d'affichage du bloc, comme nous l'avons décrit ci-dessus:

Propriété d'affichage: en ligne

Le "en ligne«La propriété ne porte pas l'élément à la ligne suivante, et aucune des propriétés de largeur et de hauteur n'affectera cette propriété.

Dans CSS, nous allons maintenant attribuer le «afficher«Valeur de la propriété comme«en ligne".

CSS

Affichage: en ligne;

L'image fournie ci-dessous indique que le texte est en ligne:

Propriété d'affichage: bloc en ligne

Cette valeur fonctionne de la même manière que la valeur d'affichage en ligne. La différence est que cette propriété d'affichage peut être modifiée à l'aide de propriétés de marge et de rembourrage. De plus, vous pouvez également définir ses valeurs de largeur et de hauteur en fonction de vos préférences.

CSS

Affichage: bloc en ligne;

Vous trouverez ci-dessous l'image, qui montre l'élément de blocage en ligne sans aucune largeur et propriétés de hauteur:

Pour voir la différence claire entre l'affichage en ligne et en ligne en ligne. Voyons à travers un exemple pratique.

Exemple: différence entre le bloc en ligne et en ligne

Dans la section de code mentionnée ci-dessous, nous avons ajouté un paragraphe en utilisant

étiqueter. À l'intérieur de cet élément, nous en avons placé deux «"Avec la classe"X"Et classe"y".

Note: est par défaut un élément en ligne.

Html

Css- cascading = "x"> style = "y"> feuille Décrit comment les éléments HTML doivent être affichés à l'écran.

Dans la section CSS, nous attribuerons la valeur de la propriété d'affichage de la classe X comme «en ligne"Tandis que la classe Y avec la valeur"bloc en ligne". Notez que toutes les autres propriétés de style sont appliquées aux deux classes de la même manière.

CSS

Dans l'image fournie ci-dessous, vous pouvez voir la différence claire dans les deux classes, la première est en ligne, et la seconde est affichée dans un bloc en ligne:

Liste de certains éléments HTML en ligne, bloc et en ligne

Beaucoup d'éléments HTML sont par défaut en ligne, bloc ou bloc de ligne. Certains d'entre eux sont énumérés ci-dessous:

Éléments en ligne HTML

• portée
• un
• IMG

Éléments de bloc HTML

• p
• li
• div
• H1
• section

Éléments HTML en ligne en ligne

• bouton
• saisir
• textarea
• sélectionner

Nous avons discuté du comportement des éléments HTML en ligne, bloc et bloc en ligne.

Conclusion

La propriété d'affichage CSS contrôle la disposition des éléments. Cette propriété CSS peut être utilisée avec trois valeurs, en ligne, bloc et bloc de ligne. Chaque valeur représente un comportement différent. Plus précisément, la valeur de propriété en bloc en ligne est similaire à la valeur en ligne, mais elle fournit également des propriétés de marge et de rembourrage à l'élément. Dans cet article, nous avons expliqué la propriété de CSS avec des exemples.