Profil

  • Christelle
  • retrouvez-moi sur : http://www.awerpi.fr
  • retrouvez-moi sur : http://www.awerpi.fr

Photo.Graph

Catégories

1 février 2009 7 01 /02 /février /2009 14:12

Margin et Padding... tout un programme ! Lorsqu'on débute en css, ces deux valeurs sont un peu obscures mais elles sont pourtant bien utiles.

Ces deux valeurs permettent de placer les éléments les uns par rapport aux autres et permettent de faire une mise en page précise.

 

Margin :

C'est simplement la marge extérieure d'un élément.

 

Padding :

C'est l'espacement intérieur d'un élément.

 

Oui, j'ai conscience que ça peut rester obscur même en donnant cette petite explication. Alors je vais tenter d'illustrer...

Imaginons que Padding et Margin sont dans un bateau... et bien Margin est tombé à l'eau, il pousse le bateau en nageant, et Padding reste dans le bateau et s'accroche au bord car il a peur de l'eau...

Ok, ok... je mets un schéma !


 

    - MARGIN :

Dans l'illustration précédente il est facile de remarquer la marge orange (margin) qui se trouve à l'extérieur de l'article. Elle permet que l'article ne soit pas collé à la pagination du haut de la page, ne soit pas collé aux modules de gauche, ne soit pas collé au bord de la fenêtre à droite et ne soit pas collé à l'article suivant.

 

La syntaxe ressemble à ça :

#article {margin: 10px ;}

On indique alors que l'article doit être espacé de 10px de tous les éléments qui l'entourent.

-> une valeur : elle s'applique à tous les côtés

 


Mais on peut encore plus précis. Si je veux que l'article soit espacé de 10 px en haut et en bas mais de 30px à gauche et à droite, je peux écrire ça :

#article {margin: 10px 30px;}

-> deux valeurs : elles s'appliquent d'abord au sens vertical (en haut et en bas) puis au sens horizontal (à gauche et à droite)

 

Et si je veux que chaque côté ait un espacement qui lui est propre, alors il suffit d'écrire ainsi :

#article {margin: 10px 30px 20px 0px;}

Dans cet exemple l'article sera espacé de 10px de la pagination (en haut), de 30px du bord de la fenêtre (à droite), de 20px de l'article suivant ou du fond de la page (en bas), et sera collé aux modules (à gauche) puisque j'ai indiqué 0.

-> quatre valeurs, on commence par en haut et on tourne dans le sens des aiguilles d'une montre 

 




 

    - PADDING :

Dans la première illustration il est facile de remarquer l'espace blanc (padding) qui se trouve à l'intérieur de l'article. Il permet que le contenu de l'article (son texte, ses images...) ne soit pas collé au bord. Ce ne serait pas très esthétique si les lettres du texte touchaient le background du blog et sans doute pas très lisible.

 

C'est pas terrible...

C'est tout de même mieux d'avoir un petit espace entre le texte et le bord de l'article.

 


Pour padding, la syntaxe ressemble à ça :

#article {padding: 15px ;}

On indique alors que le texte de l'article doit être écarté, centré, à 15px de tous les bords qui l'entourent.

-> une valeur : elle s'applique à tous les côtés

 



Mais on peut encore plus précis. Si je veux que le texte de l'article soit écarté de 15 px du haut et du bas mais de 28px à gauche et à droite, je peux écrire ça :

#article {padding: 15px 28px;}

-> deux valeurs : elles s'appliquent d'abord au sens vertical (en haut et en bas) puis au sens horizontal (à gauche et à droite)

 


Et si je veux que chaque côté ait un espacement qui lui est propre, alors il suffit d'écrire ainsi :

#article {padding: 15px 28px 5px 12px;}

Dans cet exemple l'article sera écarté de 15px du haut, de 28px de droite, de 5px du bas, et sera écarté du bord gauche puisque j'ai indiqué 12px.

-> quatre valeurs, on commence par en haut et on tourne dans le sens des aiguilles d'une montre 

 

 

Lorsqu'il y a qu'une valeur, elle s'applique aux quatre côtés ; lorsqu'il y en a deux la première s'applique au sens vertical, la deuxième au sens horizontal, lorsqu'il y en a quatre on commence par le haut, puis on tourne dans le sens des aiguilles d'une montre.

 

Il est aussi possible d'appliquer des valeurs padding et margin en suivant cette syntaxe :

padding-left : pour un espacement interne à gauche

padding-right : pour un espacement interne à droite

padding-bottom : pour un espacement interne en bas

padding-top : pour un espacement interne en haut

 

margin-left : pour une marge externe à gauche

margin -right : pour une marge externe à droite

margin -bottom : pour une marge externe en bas

margin -top : pour une marge externe en haut

 

 

 

     - Rappel...

Margin, padding et BORDER :

 

Pour border (une bordure) c'est la même chose, ou presque !

Si on indique une valeur, elle s'adapte à tous les côtés, pour deux : la première pour le sens vertical, la deuxième pour le sens horizontal... etc...

Sauf qu'il faut donner un peu plus de précisions dans la syntaxe : l'épaisseur de la ligne, le style de ligne voulue et la couleur...

Par exemple si je veux mettre une bordure simple de couleur rouge de 6px en bas de mes modules, alors j'écris :

.box {border-bottom: 6px solid #CC0000;}

ou

.box {border: 0px 0px 6px 0px solid #CC0000;}

 

Pour plus de détails pour les styles et l'utilisation des bordures : les bordures dans le css

Partager cet article

Repost 0
Published by Christelle Vinsonneau - dans webdesign
commenter cet article

commentaires

Lynxia 03/12/2009 18:21


Cet article m'a été d'une grande aide dans la conception graphique de mon blog.
Merci beaucoup de m'avoir permis de réaliser ce que j'imaginais!


Christelle Vinsonneau 06/12/2009 12:17


Et bien tu vois ravie !
Félicitations pour ton blog !


Fañch 13/05/2009 16:18

merci beaucoup :)

Christelle Vinsonneau 17/05/2009 12:15


avec plaisir


Fañch 08/05/2009 15:37

Merci de votre article qui m'a permis de me rapprocher du design que je souhaitais.
Connaîtriez-vous par le plus grand des hasards une solution pour que la pagination ne s'affiche pas en haut (ou ne soit pas visible), mais qu'elle reste disponible en bas?
Amicalement

Christelle Vinsonneau 13/05/2009 16:04


Oui... il suffit d'ajouter cette ligne dans le CSS :
.before_articles .pagination {display:none;}


Mystik-Angel 04/02/2009 17:35

Il y a quelques années, lorsque j'ai commencé à toucher au CSS en partant de zero, je me mélangeais beaucoup les pinceaux entre margin et padding. A force on s'y fait (heureusement lol).

Christelle Vinsonneau 04/02/2009 22:36


Oui un peu trops voisins pour être distincts !!! Mais comme tu dis, après on s'y fait...


cerisette 04/02/2009 15:14

un petit coucou pour te dire que je me réinscrit à ta newsletter car j'ai récupéré ma connexion
bisous
cerisette

Christelle Vinsonneau 04/02/2009 22:35


Ravie que tu aies récupéré internet ! et bienvenue sur la newsletter !