1. Jouons avec les marges

Pour le moment, le texte est centré dans les blocs de couleur, mais ces blocs sont tous à gauche, ce qui n’est pas très joli.
en effet, la commande text-align n'a d'impact que sur le texte (et les images), mais pas les boites.
On va donc jouer avec les marges pour modifier cet aspect !

La propriété margin permet de régler la distance qui sépare un contenu des autres. On peut régler séparément la marge du haut, de droite, du bas, de gauche.

Exemples :

• margin: 30px 20px 15px 10px ; - signifie 30pixels libres au-dessus, puis 20 à droite, 15 au-dessous, 10 à gauche. On tourne toujours dans cet ordre.
• margin: 30px 20px ; - signifie 30pixels libres au-dessus et au-dessous, 20 à gauche et à droite.
• margin: 30px ; - signifie 30pixels tout autour.
• margin: auto; - signifie un ajustement automatique (centré)
• margin 20px auto ; - signifie 20px en haut et en bas, et centré horizontalement

2. Le rembourrage...

Padding = rembourrage. Cette expression signifie qu’on va éloigner le texte (ou une image) du bord du cadre, comme si on « rembourrait » le contenu !

Le texte était au bord du cadre orange... il s'en est éloigné grâce au padding

La propriété margin permet de régler la distance qui sépare un contenu des autres. On peut régler séparément la marge du haut, de droite, du bas, de gauche.

Exemples :

• padding: 30px 20px 15px 10px - signifie 30pixels libres au-dessus, puis 20 à droite, 15 au-dessous, 10 à gauche. On tourne toujours dans cet ordre.
• padding: 30px 20px ; - signifie 30pixels libres au-dessus et au-dessous, 20 à gauche et à droite.
• padding: 30px ; - signifie 30pixels tout autour.

ATTENTION :
Dans tous les cas, le padding va agrandir le bloc : si celui-ci avait une largeur de 500px, il fera une taille de 540px de large en ajoutant un padding de 20px de chaque côté.

3. De jolies bordures

Pour rendre nos blocs colorés un peu plus jolis, on va ajouter des bordures. Celles-ci sont souvent sous la forme d’un trait épais, mais il existe d’autres styles (pointillés, 3D, …).

Les commandes suivantes permettent de définir le style de bordure, la couleur et la forme des angles (droits, par défaut) :

• border-style: solid; un trait plein...
• border-color: blue; ...de couleur bleue...
• border-radius: 10px ; ...avec des coins arrondis

Pour chacun de ces paramètres, on peut modifier chaque côté/angle indépendamment :

• border-color : red green blue black ;
• border-radius: 10px 0 0 20px;

Tout sur les bordures ici

4. Travail à réaliser

Vous allez modifier le code CSS pour obtenir le résultat ci-dessous :

4.1. Ecrivez le code CSS pour que les blocs "body", "nav", "touslesminions" et "footer" soient centrés horizontalement.

4.2. Modifiez le code CSS pour que les articles soient centrées horizontalement.

4.3. Ecrivez le code CSS pour que les blocs "nav", "article" et "footer" possèdent un padding de 10px.

4.4. Vous constatez que ces trois blocs sont désormais plus larges que le bloc "touslesminions". Modifiez ce dernier pour qu'il possèdent un padding de 50px verticalement et 10px verticalement

4.5. Modifiez le code CSS pour que les blocs "nav", "touslesminions" et "footer" possèdent une bordue noire, arrondie dans les coins

4.6. Modifiez le code CSS pour que les 3 articles possèdent une bordure un peu plus foncée que leur fond.

4.7. Modifiez le code CSS pour que les 3 articles possèdent une bordure arrondie, mais pas dans tous les coins (voir capture ci-dessus).

4.8. Normalement, les 3 premières images de votre fichier html possèdent une classe "img-20". Modifiez le fichier CSS pour que cette classe possède les propriétés suivantes :

• coins arrondis.
• Largeur de 20%.
• Ces 3 images devraient apparaitre déformées. Modifiez le code html qui provoque cette déformation
• Modifiez le code html pour que les 4 images du bas possèdent cette class "img-20".

4.9. Effectuez la validation W3C des fichiers HTML et CSS.