Par défaut, les éléments Html sont de type
en-ligne (inline) ou de type
bloc (block). C'est la propriété
Css
display
qui permet de changer le type d'une boîte afin de modifier la manière dont elle s'affiche.
display: inline;
Par défaut, les éléments de texte (<em>, <strong>,
<code>, etc...), <img>, <span>,
etc... sont des boîtes de type inline. Elles seront affichées les unes
à côté des autres.
Les boîtes de type en-ligne ne peuvent contenir que d'autres boîtes de type en-ligne. Ces boîtes ont des marges internes et externes nulles par défaut.
display: block;
Par défaut, <p>, <article>, <div>,
etc... sont des boîtes de type block. Elles seront affichées les unes en
dessous des autres, alignées sur le bord gauche.
Les boîtes de type bloc peuvent contenir d'autres boîtes de type bloc et/ou des boîtes de type en-ligne. Par défaut, la plupart des éléments bloc possèdent des marges internes et externes non nulles, parfois différentes selon les navigateurs.
display: inline-block;
Les boîtes auxquelles on attribue cette propriété auront les «avantages» des deux types précédents. Elles seront :
- affichées les unes à côtés des autres ;
- alignées sur leur bord inférieur ;
- réduite à la largeur minimum pour leur contenu (elles ne prennent pas toute la largeur de leur conteneur).
On peut spécifier les dimensions (hauteur et largeur) et les marges verticales
des boîtes inline-block.
display: none;
Une boîte de propriété display: none; ne sera pas affichée, ainsi que toute
boîte qu'elle contiendrait. Les autres conteneurs se placent dans le flux d'affichage
comme si cette boîte n'existait plus.
Cette propriété s'utilise par exemple pour les menus : les sous-menus sont par défaut en
display: none; et passent en display: block; lorsqu'on les
survole.
Attention !
Il ne faut pas confondre une déclaration display: none; avec une déclaration
visibility: hidden;. Pour cette seconde déclaration, le contenu de la boîte
est invisible mais occupe le même espace dans la page que si cette boîte était visible.
