176-image1-fr1235062922.jpg

CSS : margin VS padding (marge externe et marge interne)

Si vous ne connaissez pas la différence entre les 2 styles CSS margin et padding, je vous propose de vous expliquer leur utilité.
 
Le style CSS margin permet de définir les marges externes d’un élément HTML(exemple : un conteneur comme une balise <div>), alors que le style CSS padding permet de définir les marges internes à un élément HTML.
 
Dans mon exemple, je vais appliquer sur un calque une marge externe de 50 pixels (margin:50px;) et une marge interne de 50 pixels également (padding:50px;). Dans cet exemple, les marges vont s’appliquer sur les 4 cotés du conteneur (haut, droite, bas et gauche).
 
Style CSS margin padding
 
Obtenu grâce au code HTML suivant : 
 
<html>
<head>
<style>
.div1{
padding:50px;
margin:50px;
border:10px solid #000000;
width:200px;
background-color:#00ff00;
}
</style>
</head>
<body>
<div class="div1">
Généralement, on utilise un texte en faux latin (le texte ne veut rien dire, il a été modifié),
le Lorem ipsum ou Lipsum, qui permet donc de faire office de texte d’attente :
(http://lorem-ipsum.studiovitamine.com)
L’avantage de le mettre en latin est que l’opérateur sait au premier coup d’oeil
que la page contenant ces lignes n’est pas valide, et surtout l’attention du client
n’est pas dérangée par le contenu, il demeure concentré seulement sur l’aspect graphique.
</div>
</body>
</html>

Auteur : Fabien Branchut

Fabien Branchut
Concepteur de site web depuis 2001 : développement web et SEO. Co-fondateur et directeur web de l'agence Studio Vitamine depuis 2008 : conception e-commerce, chef de projet, stratégie SEO. Site de Fabien Branchut.

Commentaires Facebook

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *