Trucs & astuces
Marges
Gestion des marges d’une page
Afin d’avoir le contrôle sur les marges de votre page, vous pouvez utiliser l’élément « colonne » sur l’ensemble de votre page :
Exemple classique
Exemple avec l’utilisation de colonnes
À noter
L’élément Colonne permet d’ajuster la largeur des colonnes de gauche et de droite.
Répéter sur l’ensemble de la page, elle garantit une homogénéité dans les marges de la page.
La colonne centrale étant utilisée pour le contenu.
Exemple :
À savoir
- Il faut rajouter le paramètre CSS plr–small de marges à l’élément Colonne afin qu’au responsive les éléments ne collent pas les bords de l’écran.
- La valeur exprimée pour les colonnes de droite et de gauche doit être exprimée en pourcentage. Celle-ci s’adaptera en fonction de la largeur de la fenêtre.
- Il faut également que l’élément Colonne soit en pleine largeur.
Gestion des marges d’un élément
Vous pouvez contrôler le margin (marge externe) et padding (marge interne) de vos blocs avec un système de classes.
La forme de la class sera :
position- -taille :
Position
On commence par un m pour margin ou un p padding. On peut être plus précise en ajouter d’autre lettres :
- t pour top
- b pour bottom
- l pour left
- r pour right
Taille
Voici les possibilité de taille du plus grand au plus petit :
- xx-large : 150px
- x-large : 100px
- large : 75px
- small : 40px
- tiny : 30px
- x-tiny : 20px
- xx-tiny : 10px
Reset
Il existe aussi deux autres classes utilitaires pour supprimer complètement les marges :
- reset- -m Supprime les marges extérieurs
- reset- -p Supprime les marges intérieurs