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.

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).

Principaux éléments de type block

  • <div> : balise multi-usage. Cette balise est souvent utilisée pour positionner un contenu dans la page.
  • <h1> ... <h6> : encadre un titre ou un sous-titre.
  • <p> : paragraphe.
  • <ul>, <ol>,<dl> : listes (non ordonnée, ordonnée ou avec définition).
  • <li>, <dt>,<dd> : élément de liste, définition, et titre de définition.
  • <table> : tableau.
  • <blockquote> : paragraphe indenté (décalé à droite) normalement utilisé pour présenter une citation.
  • <pre> : bloc de code préformaté.
  • <form> : formulaire de saisie.

Les caractéristiques des éléments Inline

Un élément inline se comporte comme des caractères dans une phrase : il continue sur la même ligne que l’élément précédent sauf si celui-ci est un élément de type bloc, évidemment.
- height, line-height, marges top et bottom ne pourront être changées
- La hauteur est déterminée par le contenu de l’élément et ne peut être modifiée.

Liste des principaux éléments inline

  • <span> : balise multi-usage, trés pratique pour appliquer un style CSS à une portion de texte, par exemple.
  • <a> : ancre, permet de créer un lien sortant ou permet de spécifier un point précis de la page vers lequel on veut diriger un lien.
  • <strong> : utilisé pour marquer l’importance particulière d’une portion de texte. Tous les navigateurs actuels afficheront cette portion en gras. NOTE : l’ancienne balise <b> (bold) était obsolète en xhtml mais peut de nouveau être utilisée en html5.
  • <em> : utilisé pour accentuer l’importance d’une portion de texte (de façon moins forte que <strong>). Tous les navigateurs actuels afficheront cette portion en italique. NOTE : l’ancienne
    balise <i> (italic) était obsolète en xhtml mais peut être utilisée de nouveau en HTML5.
  • <img> : image, permet de placer une image au milieu du flux de texte.
  • <br> : saut de ligne. Voilà un cas tout à fait particulier d’élément en-ligne, qui provoque un saut de ligne. Malgré cette particularité, <br> n’est définitivement pas un bloc et doit être classé
    comme élément en-ligne.
  • <input> : champs de saisie dans un formulaire, tel que ou
  • <abbr> : signale une abbréviation (placez votre curseur dessus pour voir le
    fonctionnement). Note : Internet Explorer ne gère
    pas cette balise dans ses versions antérieures à la version 7
    .