marges et espaces template blogger

obtenir ces boutons


Marges et espaces


Pour ajouter des espaces entre les différents éléments d'un blog, on a recours à l'instruction "margin".

Cette instruction crée des espaces à l'extérieur d'un élément : titre, message, barres latérales, ...

Rappel : un lexique des principaux éléments constituant le blog, qui sont répertoriés dans la partie "mise en page" ("CSS") du "modèle" (template) de blog, figure ici.

L'instruction "margin" peut se présenter sous la forme "margin: 5px;" (le chiffre varie en fonction des besoins), auquel cas elle s'applique dans les 4 directions : au-dessus, à droite, en-dessous et à gauche.

Elle peut aussi ne concerner qu'une, deux ou trois de ces directions. On utilise alors, isolément ou ensemble, :
"margin-top: 5px;"
"margin-right: 5px;"
"margin-bottom: 5px;"
"margin-left: 5px;".

On peut aussi écrire :
"margin: 10px 20px 30px 40px;"

Dans ce cas, l'ordre retenu est :
1. haut
2. droite
3. bas
4. gauche

Les 3° et 4° mentions sont facultatives. Si elles sont absentes, la valeur de la première mention sera appliquée à la 3°, et celle de la seconde est appliquée à la 4°. Par exemple, "margin: 10px 20px;" correspond à "margin: 10px 20px 10px 20px;".

On peut également demander à l'ordinateur de calculer automatiquement les espaces. Ainsi par exemple, si on ajoute "margin: 0 auto 0 auto;" (ou "margin: 0 auto;") dans "outer-wrapper" (qui définit l'affichage de toute la page (messages + barres latérales), on aura des espaces identiques à gauche et à droite. Mais cette formule ne fonctionne pas avec tous les navigateurs. Pour internet explorer, il faut utiliser en plus "text-align:center;" pour centrer un élément.

Rappel : un lexique des principaux éléments constituant le blog, qui sont répertoriés dans la partie "mise en page" ("CSS") du "modèle" (template) de blog, figure ici.
* * * * *

Pour ajouter des marges à l'INTÉRIEUR d'un élément d'un blog, autour du contenu de cet élément, on a recours à l'instruction "padding".

Cette instruction crée des marges entre le bord d'un élément et son contenu.

Elle peut se présenter sous la forme "padding: 5px;" (le chiffre varie en fonction des besoins), auquel cas elle s'applique dans les 4 directions : au-dessus, à droite, en-dessous et à gauche.

Elle peut aussi ne concerner qu'une, deux ou trois de ces directions. On utilise alors, isolément ou ensemble, :
"padding-top: 5px;"
"padding-right: 5px;"
"padding-bottom: 5px;"
"padding-left: 5px;".

On peut aussi écrire :
"padding: 10px 20px 30px 40px;"

Dans ce cas, l'ordre retenu est :
1. haut
2. droite
3. bas
4. gauche

Les 3° et 4° mentions sont facultatives. Si elles sont absentes, la valeur de la première mention sera appliquée à la 3°, et celle de la seconde est appliquée à la 4°. Par exemple, "padding: 10px 20px;" correspond à "padding: 10px 20px 10px 20px;".

Aucun commentaire: