Pour intégrer une création de charte graphique ou créer un page web basique, les marges intérieures (padding) et extérieurs (margin) sont deux propriétés très importante. Elles permettent à la fois de maîtriser l’espacement entre les différents blocs constituant une page web et l’espacement entre les bordures de ces blocs et leur contenu. Nous allons voir dans ce tutorial comment maîtriser ces deux propriétés indispensables en CSS.
Les marges extérieures : margin
La propriété margin englobe les quatre marges extérieures d’un bloc, c'est-à-dire la marge supérieure, la marge droite, la marge inférieure et enfin la marge gauche (à définir dans l’ordre en CSS).
Nous allons créer une div à laquelle nous allons attribuer une largeur, une hauteur, une couleur d’arrière plan et des marges extérieures :
Nous avons défini ici la même valeur (5px) pour les quatre marges extérieures citées précédemment. Comme vous le voyez sur l’image, la div s’est décalé de 5px par rapport au bord de la page.
La bande rouge représente la distance entre le texte (contenu à l’intérieur de la div) et la bordure de la div. C’est la padding.
Nous allons maintenant définir quatre valeurs différentes pour nos marges extérieures (toujours dans l’ordre : top, right, bottom, left) :
Les marges intérieures : padding
La propriété padding englobe les quatre marges intérieures d’un bloc, c\'est-à-dire la marge supérieure, la marge droite, la marge inférieure et enfin la marge gauche (à définir dans l’ordre en CSS).
Nous allons créer une div à laquelle nous allons attribuer une largeur, une hauteur, une couleur d’arrière plan et des marges intérieures :
La bande rouge représente la distance entre le texte (contenu à l’intérieur de la div) et la bordure de la div. C’est la padding.
Nous allons maintenant définir quatre valeurs différentes pour nos marges intérieures (toujours dans l’ordre : top, right, bottom, left) :
Vous pouvez maintenant vous entraîner à créer des marges. Toutefois, les différents navigateurs interprètent différemment cette propriété, il est donc important d’effectuer des vérifications afin de vous assurer du rendu de votre page web.
Les marges extérieures : margin
La propriété margin englobe les quatre marges extérieures d’un bloc, c'est-à-dire la marge supérieure, la marge droite, la marge inférieure et enfin la marge gauche (à définir dans l’ordre en CSS).
Nous allons créer une div à laquelle nous allons attribuer une largeur, une hauteur, une couleur d’arrière plan et des marges extérieures :
<div style="width:110px; height:60px; background:#CCCCCC; margin:5px">
Ceci est notre div
</div>
Nous avons défini ici la même valeur (5px) pour les quatre marges extérieures citées précédemment. Comme vous le voyez sur l’image, la div s’est décalé de 5px par rapport au bord de la page.
La bande rouge représente la distance entre le texte (contenu à l’intérieur de la div) et la bordure de la div. C’est la padding.
Nous allons maintenant définir quatre valeurs différentes pour nos marges extérieures (toujours dans l’ordre : top, right, bottom, left) :
<div style="width:110px; height:60px; background:#CCCCCC; margin:10px 0 5px 20px">
Ceci est notre div
</div>
Les marges intérieures : padding
La propriété padding englobe les quatre marges intérieures d’un bloc, c\'est-à-dire la marge supérieure, la marge droite, la marge inférieure et enfin la marge gauche (à définir dans l’ordre en CSS).
Nous allons créer une div à laquelle nous allons attribuer une largeur, une hauteur, une couleur d’arrière plan et des marges intérieures :
<div style="width:110px; height:60px; background:#CCCCCC; padding:5px">
Ceci est notre div
</div>
La bande rouge représente la distance entre le texte (contenu à l’intérieur de la div) et la bordure de la div. C’est la padding.
Nous allons maintenant définir quatre valeurs différentes pour nos marges intérieures (toujours dans l’ordre : top, right, bottom, left) :
<div style="width:110px; height:60px; background:#CCCCCC; padding:10px 0 5px 20px">
Ceci est notre div
</div>
Vous pouvez maintenant vous entraîner à créer des marges. Toutefois, les différents navigateurs interprètent différemment cette propriété, il est donc important d’effectuer des vérifications afin de vous assurer du rendu de votre page web.