Les bases du langage CSS 3

V – Les boîtes

margin

border

padding

content↔ width↕ height

Les différents blocs qui composent une page Web doivent être agencés et dimensionnés.

Les dimensions du contenu d'un bloc (hors marges) se règlent en largeur width et en hauteur height, mesurées en px ou en %.

Par défaut, un bloc occupe toute la largeur de la page et la hauteur minimale nécessaire.

On peut imposer des dimensions minimales et maximales à un bloc avec min-width, max-width, min-height, max-height.

p { width: 50%; height: 300px; min-width: 500px; }

Un bloc a une marge intérieure padding et une marge extérieure margin mesurées en px.

On peut spécifier des marges extérieures différentes à chaque bord d'un bloc avec margin-top, margin-left, margin-right et margin-bottom.

De même pour les marges intérieures avec padding-top, padding-left, padding-right et padding-bottom.

Pour centrer un bloc horizontalement, il suffit d'utiliser l'instruction : margin: auto;

La propriété overflow permet de gérer les dépassements de texte dans un bloc.

visible (par défaut) : si le texte dépasse, il reste visible et sort du bloc.
hidden : si le texte dépasse, la partie qui dépasse est supprimée.
scroll : le texte est coupé mais la partie invisible est accessible via les barres de défilement.
auto : c'est le navigateur qui décide.

La propriété word-wrap: break-word permet de couper les mots trop longs.