8) Elements inline et block

Tous les éléments présents dans le body, d’une page ont un comportement "en ligne" ou "bloc". Cette différence est déterminante dans l’écriture de votre code : les éléments inline et bloc n’ont pas le même comportement visuel. Petit rappel.

Précédent | 10/16 | Suivant

Vous trouverez ici une page de test (réalisée avec jQuery et interface) qui permet de déterminer les deux types de comportement pour les principaux éléments.

Les caractéristiques des éléments de type block

Commence toujours sur une nouvelle ligne ( voila pourquoi parfois vous n’arrivez pas à placer un bloc a droite d’un autre bloc ;)
- Les attributs height, line-height, margin, padding peuvent être modifiés
- La largeur est par défaut fixée à 100% de leur élément conteneur, si une autre largeur n’est pas spécifiée.
On peut forcer la taille des éléments de type bloc, en pixel, en pourcentage, en em, en points. Leur taille totale est l’addtion de du padding, du border, du margin et la largeur (width).

Les caractéristiques des éléments Inline

Commence sur la même ligne que l’élément précédent.
- Height, line-height top and bottom margins ne pourront être changées
- La longueur est aussi longue que son contenu et ne peut être modifiée.