20. Le modèle standard de boîte
Avec les CSS est apparue la notion de profondeur. Les différents objets sont superposés.
Chaque élément en HTML est considéré comme une boîte. Aux dimensions induites par leur contenu s’ajoutent souvent les espaces de marges externes (margin) ou internes (padding) et une bordure (border).
/http%3A%2F%2F62.233.33.215%2F0%2F41%2F04%2F82%2Fwebinfo%2Fbox-default02.png)
Ces trois périmètres ne sont pas obligatoires. Non renseignés, ils prendront la valeur par défaut. Les éléments en ligne auront toujours une valeur nulle. En revanche, parmi les sélecteurs de type bloc, seul <div> n’a pas de marges par défaut. Tenir compte des marges et paddings par défaut des éléments de type bloc vous épargnera des soucis ou décalages involontaires avec des balises comme <h1>, <h2>, <ul>, etc.
Les dimensions des boîtes
/http%3A%2F%2F195.20.15.206%2F0%2F41%2F04%2F82%2Fwebinfo%2Fboxdefault1.png)
Pour éviter ce désagrément, on préférera recourir aux marges externes (margin) plutôt qu'internes. Si l'on souhaite séparer un bloc du reste du document par 30 pixels à gauche, on écrira margin-left: 30px.
accéder à l'article suivant
Publicité