Faire une marge en css est un challenge qui peut faire peur aux néophytes. Surtout lorsque faisant une recherche, on tombe sur des dizaines de sites qui nous présentent des lignes de codes auxquelles on ne comprend pas grand chose. Sur ce site, j’ai donc décidé de vous proposer d’apprendre le css de manière plus simple et intuitive. Et vous allez voir que la marge css , n’est pas si complexe à faire que ça, une fois que vous avez compris comment fonctionne le css…

 

La marge css est déjà présente partout sur vos éléments mais vous l’ignorez…

En langage css chaque balise html (par exemple une balise paragraphe(<p>), un titre(<H>), une image(<img>, et même le body global(<body>) d’une page possède déjà sa propre marge css, mais elle est cachée… basique… sans propriété associés…

Par exemple, si vous avez une image, voici les éléments invisibles présents autour d’elle lorsque vous la mettez en ligne sur votre site ou blog wordpress :

exemple marge css

Ce type de structure existe autour de chaque éléments de votre page, mais vraiment tous les éléments, c’est à dire qu’un logo ou un paragraphe par exemple, vont être entourés par ce même type de blocs invisibles et vous pourrez les modifier comme vous voulez de manière individuelle.

En gros voici se qui se passe en coulisse côté css :

box css model

Ces 3 types d’éléments qui forment les blocs css autour des balises html s’appellent…

  • Le padding (c’est l’espace entre le contenu et le contour invisible)
  • Le border (c’est le contour invisible autour du contenu)
  • Le margin (c’est l’espace entre le contour d’un élément et les autres éléments de votre site)

Pour comprendre comment utiliser ces éléments facilement, il faut les voir comme l’emballage de votre élément principal et différentes couches que vous allez lui superposer.

 

Ensuite pour réaliser des espaces ou une marge css, c’est très simple…

Si vous voulez créer un espace entre vos paragraphes (balise html p),  et leur ajouter un contour et une marge, vous pouvez mettre ça dans votre feuille de style.


p {
padding: 45px;
border: 1px solid;
margin: 25px;
}

Ce qui appliqué à une page html et une feuille de style css, pourrait vous donner ça :

exemple css

  • 25 pixels de marge autour du bloc
  • 45 pixels d’espace entre le texte du paragraphe, et le contour
  • un contour de 1px de forme solide

Je vous ai fait une version couleur pour que vous puissiez voir les différents éléments et leur position.

css exemple marge padding border

C’est le principe de base pour créer une marge css,  on créé un espace autour du contenu, puis un espace entre le contour et la marge (même s’il n’est que de 1px c’est un espace, il peut aussi être de 0px). Bien sur, vous pouvez ensuite modifier les valeurs en pixel à votre convenance et même utiliser des pourcentages et vous pouvez même choisir des valeurs différentes pour la gauche, droite, le haut, le bas des différente partie du bloc. Mais, je vous expliquerais ça à mesure de votre découverte du css, pour le moment restons simple et ne compliquons pas les choses.

Que diriez-vous de commencer par apprendre à modifier une bordure css en long en large, et en travers? Vous allez voir on peut faire des tas de choses sympas.

Faites connaître ce cours sur vos réseaux sociaux favoris :