Gérer les bordures et les débordements

Une bordure trop discrète peut rendre un bloc difficile à repérer ; une bordure trop lourde peut détourner l’attention du contenu. Et lorsqu’un texte ou une image dépasse de son contenant, le résultat peut gêner la lecture. Dans cette leçon, vous allez régler ces deux aspects sur la page de présentation de l’atelier de jardinage.

Vous avez déjà appris à cibler les éléments avec des sélecteurs de type, de classe, d’identifiant et de descendant. De même, le modèle de boîte présenté dans la leçon précédente distingue le contenu, le remplissage intérieur, la bordure et la marge ; ici, vous allez surtout travailler sur la bordure et le débordement.

Définir une bordure

La propriété border permet de préciser l’épaisseur, le style et la couleur d’une bordure en une seule déclaration. Par exemple, 1px solid #6b7d45 donne une ligne continue de 1 pixel, en vert. La bordure entoure le contenu et son remplissage intérieur, mais reste à l’intérieur de la marge.

<!doctype html>
<html lang="fr">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Atelier de jardinage</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <header>
        <h1>Atelier de jardinage</h1>
        <p>Apprenez à cultiver vos premières plantes.</p>
    </header>
    <main>
        <section class="conseil">
            <h2>Conseil pratique</h2>
            <p>Arrosez vos semis lorsque la surface du terreau commence à sécher.</p>
        </section>
        <p>Horaires : le samedi, de 9 h à 12 h.</p>
        <p>Contact : <a href="mailto:[email protected]">[email protected]</a></p>
    </main>
</body>
</html>

/* Bordure discrète autour du conseil */
.conseil {
    border: 2px solid #6b7d45;
    padding: 16px;
}

/* Coins arrondis pour adoucir le bloc */
.conseil {
    border-radius: 8px;
}

Enregistrez ce CSS dans style.css, puis ouvrez la page dans votre navigateur. Le conseil apparaît dans un cadre vert de 2 pixels, séparé de son texte par un espace intérieur de 16 pixels. La propriété border-radius arrondit les quatre angles ; une valeur de 0 les garde droits, tandis qu’une valeur plus grande accentue l’arrondi.

Choisir quoi faire du contenu qui dépasse

La propriété overflow indique comment afficher le contenu qui dépasse les limites d’un bloc. Sa valeur initiale, visible, laisse ce contenu apparaître hors du bloc. Avec hidden, la partie dépassante est coupée ; avec auto, le navigateur ajoute une barre de défilement seulement si elle est nécessaire.

/* La hauteur fixe rend le débordement visible dans cet exemple */
.conseil {
    height: 80px;
    overflow: auto;
}

La hauteur fixe de 80 pixels sert ici à rendre le test observable : le texte du conseil est susceptible de dépasser l’espace disponible. Avec overflow: auto, une barre de défilement apparaît si le contenu ne tient pas ; si vous remplacez auto par hidden, le texte excédentaire est masqué et n’est plus lisible dans ce bloc. Pour un contenu destiné à être lu en entier, évitez de le couper sans raison et testez le rendu avec le texte réel.

Distinguer block et inline

Les éléments de type block, comme p et section, commencent normalement sur une nouvelle ligne et prennent la largeur disponible. Les éléments de type inline, comme a dans un paragraphe, restent dans le flux de texte et occupent la place nécessaire à leur contenu. Cette différence explique pourquoi une bordure autour d’un lien entoure généralement les mots du lien, tandis qu’une bordure autour d’une section encadre une zone plus large.

a {
    border: 1px solid #6b7d45;
    border-radius: 4px;
}

Cette règle encadre le texte du lien de contact sans transformer le lien en bloc pleine largeur. Si vous appliquez plutôt la même bordure à .conseil, elle entoure la zone de la section. Gardez donc en tête le comportement de l’élément ciblé lorsque vous cherchez à comprendre la forme et l’étendue d’une bordure.

À retenir

• border regroupe l’épaisseur, le style et la couleur de la bordure.
• border-radius règle l’arrondi des angles.
• overflow laisse dépasser, coupe ou rend défilant le contenu qui ne tient pas dans un bloc.
• Un élément block occupe normalement une ligne et la largeur disponible ; un élément inline reste dans le flux du texte.

Dans la prochaine leçon, vous utiliserez Flexbox pour aligner des éléments et répartir l’espace entre eux.