La propriété display

display est une propriété qui permet de définir le mode d'affichage d'un élément.
De nombreuses valeurs peuvent lui être affectées :
- block et inline sont les deux valeurs usuelles prédéfinies pour les éléments de bloc et les éléments intégrés
- list-item génère un bloc contenant un marqueur d'item (puce, numéro, ...), c'est le mode d'affichage par défaut de l'élément li
- table, inline-table, table-row-group, table-column, table-column-group, table-header-group, table-footer-group, table-row, table-cell, and table-caption correspondent aux modes d'affichage par défaut des différents éléments constitutifs des tableaux HTML.
- none retire l'élément associé du flux f'affichage (le rend invisible)
- inline-block permet de produire un block qui s'intègre comme un élément intégré dans l'élément père (exemple).
- CSS3 introduit deux nouveaux modes d'affichage : le gridLayout et le flexLayout

Exemples :

Application au code HTML/CSS suivant :

<div>
<div>Un</div>
<div>Deux</div>
<div>Trois</div>
</div>

div > div{
border-radius: 5px;
border: mediumblue thin solid;
}

Code css (transformation d'un bloc en élément intégré) :

div > div{
border-radius: 5px;
border: mediumblue thin solid;
display : inline;
}

Application au code HTML/CSS suivant :

<h5>Texte
<span class="ib"><h6>Mot</h6> <p>phrase</p></span>
fin du
<i>titre</i></h5>

Code css (span configuré en inline-block) :

span.ib {
display: inline-block;
background-color: mediumaquamarine;
}
h5 {
background-color: lightgoldenrodyellow;
}