Élément block et inline

Dans cette session de formation nous allons découvrir la propriété Display qui nous permet de changer la disposition d’affichage des élément HTML.

Disposition en flux

Le flux normal ou « disposition en flux » (Flow Layout) correspond à la façon dont les éléments de bloc et les éléments en ligne sont disposés avant tout changement apporté à leur disposition.

Avec un flux normal, les éléments en ligne (inline elements) sont affichés selon le sens dans lequel les mots sont écrits.

Les éléments de bloc sont affichés les uns après les autres, à la façon des paragraphes.

Par exemple, pour un document français, les éléments en ligne sont affichés les uns à la suite des autres de gauche à droite et les éléments de bloc sont affichés les uns en dessous des autres.

Dans l’exemple suivant, on peut voir des boîtes de bloc et des boîtes en ligne. Les deux éléments correspondants aux paragraphes sont des éléments de bloc. Ces deux éléments s’affichent l’un en dessous de l’autre.

Le deuxième paragraphe contient également des éléments . C’est un élément en ligne qui s’affiche donc de gauche à droit.

Disposition en flux

1
2
3
4
5
6
7
8
9

<body>
    <h1>Titre</h1>
    <p>Paragraphe 1</p>
    <p>
        Paragraphe 2 : 
        <span>Phrase 1</span>
        <span>Phrase 2</span>
    </p>
</body>

Display : block et inline

La propriété display définit :

  • le type d’affichage utilisée pour le rendu d’un élément (de bloc ou en ligne)
  • et la disposition utilisée pour ses éléments fils.

Nous allons ce concentrer dans notre session de formation sur le rendu d’un élément en bloc ou en ligne.

Nous allons traiter les valeurs

  • block,
  • inline
  • et inline-block.

  • La valeur block génère une boîte de bloc qui ajoute des passages à la ligne avant et après l’élément dans le flux normal.

  • la valeur inline génère une ou plusieurs boîtes en lignes qui n’ajoutent pas de passages à la ligne avant ou après. Dans un flux normal, le prochain élément sera sur la même ligne si l’espace le permet.. Les propriétés de hauteur et de largeur n’auront aucun effet

  • la valeur inline-block : affiche un élément en tant que conteneur de blocs de niveau en ligne. L’élément lui-même est formaté comme un élément en ligne, mais vous pouvez appliquer des valeurs de hauteur et de largeur1.

Disposition en flux

Pratique : display block et inline

Les objectifs de ce travail paratique :

  • Découvrir les styles par défaut
  • Changer la propritété display
  • Découvrir la valeur : none
  • Apprendre la différence entre inline, block et incline-block
  • Savoir comment utiliser la documentation officiel.

Explication pratique élément h1

Code source

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30

<!DOCTYPE html>
<html lang="en">
<head>
    <style>
        h1{
            display: inline;
        }
        p{
            background-color:pink;
            display: inline-block;
            width: 400px;
            height: 150px;
        }
        a{
            display: inline-block;
            width: 100px;
            text-align: center;
        }
    </style>
</head>
<body>
    <h1>Qu'est-ce que l'ordinateur</h1>
    <p>
    Un <a href="https://fr.wikipedia.org/wiki/Ordinateur" target="_blank">ordinateur</a> est un appareil électronique capable de 
    réaliser rapidement des opérations mathématiques, 
    logiques, des manipulations de chaînes de caractères 
    ou des recherches. Il est composé de deux grandes parties :
    </p>
</body>
</html>

Résultat

devenir-developpeur-web