Quand on travaille sur une interface web, il arrive souvent qu’un élément dépasse sans raison, qu’une marge apparaisse là où on ne s’y attend pas, ou qu’une partie de la page déborde horizontalement.
Dans ces cas-là, une simple ligne de CSS peut faire gagner beaucoup de temps.
* {
border: 1px solid red;
}
Cette règle force chaque élément de la page à afficher une bordure rouge.
En quelques secondes, on obtient une vision claire de la structure réelle du layout.
Comprendre ce que fait le sélecteur universel *
Le symbole * est appelé sélecteur universel.
Il cible tous les éléments du document HTML : titres, paragraphes, images, sections, boutons, etc.
En ajoutant border: 1px solid red;, on applique une bordure rouge à chacun d’eux.
Le but n’est pas esthétique, mais purement visuel :
cela permet de voir les limites exactes de chaque boîte sur la page.
Pourquoi cette astuce est utile
En CSS, tout est basé sur le concept de boîte (le box model).
Chaque élément est une boîte composée de quatre zones :
- le contenu (content),
- le remplissage intérieur (padding),
- la bordure (border),
- et la (margin).
Commentaires