Notions de boîtes en HTML et CSS

Balises en lignes et en bloc

Les éléments HTML se rangent en deux catégories selon leur comportement. Il existe des éléments dits "en ligne" et d'autres dits "blocs". Les seconds (blocs) ont la particulartié de provoquer un retour à la ligne chaque fois qu'ils sont utilisés.

Par exemple, un paragraphe est un élément de type bloc. Tout contenu HTML suivant un paragraphe ira à la ligne après ce paragraphe.

À l'inverse, les éléments "en ligne" se juxtaposent sur la même ligne sans provoquer de retour à la ligne. C'est le cas des images.

Les blocs

Les éléments blocs les plus courants sont les paragraphes p et les titres h1 à h6.

C'est aussi le cas d'une balise particulière, la balise div. Cette balise représente une zone rectangulaire sur la page, dont le rôle est de recevoir du contenu. C'est comparable à un bloc dans InDesign.

La balise div va être très utilisée pour la mise en page.

Notion de boîte, les marges et bordures

Un élément de type bloc ressemble à une boîte, dont on peut fixer les caractéristiques dans une règle de style css dans la catégorie "boîte".

Les valeurs applicables à une boîte sont ses dimensions Width et Height, et ses marges Padding et Margin, voir ci-dessus.

Le Padding est un blanc tournant à l'intérieur de la boîte, en quelque sotre une marge intérieure. Il a pour rôle de décaler le contenu vers l'intérieur.

Le Margin est une marge à l'extérieur de la boîte. Elle est également très utilisée en mise en page pour positionner du contenu sur une page ou dans un bloc.

Dans tous les cas, leurs dimensions s'ajoutent à celles de la poîte.

À cela, il faut ajouter l'utilisation des bordures, dans la catégorie Bordure, dont les dimensions s'ajoutent également à celles de la boîte.

Le modèle de la boîte

Voir à ce sujet cette page : http://www.yoyodesign.org/doc/w3c/css2/box.html

La fusion des marges

C'est un phénomène particulier, sur lequel vous trouverez des renseignements ici : http://www.alsacreations.com/article/lire/629-fusion-des-marges.html