Mise en page HTML par défaut | bobbyhadz

Les éléments Html sont mis en page en prenant le contenu des éléments, en ajoutant tout padding,
les bordures et les marges qui les entourent.

Éléments HTML de niveau bloc par défaut #

1. prennent 100% de la largeur de leur élément parent
2. sont aussi grands que leur contenu
3. sont disposés verticalement et sont placés sur une nouvelle ligne
4. sont séparés par toute marge qui leur est imposée. Si deux éléments adjacents
   adjacents sont marqués d’une marge et que le deux marges se touchent, la plus grande marge
   reste et la plus petit disparaît (la marge s’effondre).

Éléments HTML de niveau Inline par défaut #

1. sont aussi larges que leur contenu
2. sont aussi grands que leur contenu
3. sont assis sur la même ligne et tout contenu textuel adjacent, à condition qu’il y ait de l’espace pour eux dans la largeur de l’élément de bloc parent.
   tant qu’il y a de la place pour eux dans la largeur de l’élément de bloc parent.
   S’il n’y a pas d’espace alors le texte ou les éléments qui débordent sont déplacés vers
   une nouvelle ligne.
4. ne sont pas 100% compatibles avec les marges verticales. Selon la spécification css :
   les marges verticales n’ont aucun effet sur les éléments en ligne non remplacés.
   non remplacés. Ainsi, par exemple margin-top ou margin-bottom n’a aucun effet sur un
   span ou un élément a mais les deux marges verticales ont un effet sur les éléments.
   effet sur img, textarea, input éléments.
5. ne nous permettent pas de définir leurs height et width car ils se trouvent juste à l’intérieur du
   contenu des éléments de niveau bloc. Si vous voulez contrôler la taille d’un élément inline
   vous devez le paramétrer pour qu’il se comporte comme un élément de bloc avec
   display: block; ou un élément inline-block avec display: inline-block;