Éléments de type bloc et en ligne

Fait partie de la section Style avec CSS du Journey HTML de Coddy. Leçon 54 sur 76.

En HTML, les éléments sont classés comme éléments de niveau bloc ou en ligne, selon la manière dont ils sont affichés sur la page. Comprendre la différence entre ces deux types d’éléments est essentiel pour créer des mises en page bien structurées et visuellement attrayantes. Explorons les caractéristiques et les comportements des éléments de niveau bloc et des éléments en ligne.

Éléments de niveau bloc

Un élément de niveau bloc commence toujours sur une nouvelle ligne et occupe toute la largeur disponible, s'étendant vers la gauche et la droite autant que possible. Il crée un « bloc » de contenu.

Voici des exemples d'éléments de bloc :

<div>
<h1> - <h6>
<p>
<ul>, <ol>, <li>
<form>
<table>
<header>, <footer>, <section>, <article>, <nav>

Éléments en ligne

Un élément en ligne ne commence pas sur une nouvelle ligne et n'occupe que la largeur nécessaire pour s'adapter à son contenu. Il permet aux éléments en ligne de s'insérer dans une ligne de texte ou à l'intérieur d'un élément de niveau bloc.

Voici des exemples d'éléments en ligne :

<span>
<a>
<img>
<strong>, <em>
<input>, <button>, <label>
<textarea>

Défi

Facile

Un document HTML contenant différents éléments vous est fourni. Votre tâche consiste à identifier quels éléments sont de niveau bloc et lesquels sont en ligne, puis à appliquer un CSS de base pour mettre en évidence les différences. Suivez les étapes ci-dessous :

Écrivez une règle CSS qui cible tous les éléments de niveau bloc (div, p, h1). Définissez leur background-color sur lightgray et ajoutez une border de 1px solid blue.
Écrivez une règle CSS qui cible tous les éléments en ligne (span, a, img). Définissez leur background-color sur lightyellow et ajoutez une border de 1px solid red.

Observez comment les éléments de niveau bloc occupent toute la largeur disponible et commencent sur de nouvelles lignes, tandis que les éléments en ligne occupent uniquement l'espace nécessaire et s'insèrent dans la ligne.

Essayez vous-même

<html>
<head>
    <title>Block vs Inline Elements</title>
    <style>
        /* Write CSS rules here */
    </style>
</head>
<body>
    <div>This is a div element.</div>
    <p>This is a paragraph with a <span>span element</span> inside.</p>
    <h1>This is a heading element.</h1>
    <a href="#">This is a link</a>
    <img src="https://img.freepik.com/free-photo/abstract-luxury-gradient-blue-background-smooth-dark-blue-with-black-vignette-studio-banner_1258-54865.jpg" alt="Image" width="100">
</body>
</html>