image du header du tutoriel sur le modèle de boite

Tuto Html et Css: Le modèle de boite

Pour comprendre le modèle de boite, il faut tout d’abord réaliser qu’une page Html est composée d’une multitude de boites rectangulaires, imbriquées et positionnées . Ces boites ont des caractéristiques que je vais essayer de vous expliquer dans ce tutoriel.

Le modèle de boite:

représentation du modèle de boite

En regardant cette image représentant une boite nous remarquons plusieurs éléments:

  • les marges extérieures (margin)
  • les bordures (border)
  • le contenu (élément html)
  • les marges intérieures (padding)

Notez que l’utilisation d’un damier blanc et gris, référence Photoshopienne à la transparence, pour représenter les marges extérieures n’a pas était choisi par hasard nous y reviendrons dans quelques instants.

La taille de la boite:

Appliquons maintenant des propriétés Css à un élément Html (pour l’exemple un paragraphe).

image du code html pour la taille de la boiteimage du code Css pour la taille de la boiterendu navigateur: pour la taille de la boite

Bien que nous ayons définit une taille de 450px sur 200px à notre élément à l’aide des propriétés width et height nous pouvons nous apercevoir qu’au final sa taille est de 480px sur 230px. En effet la taille de l’élément est définit par le contenu mais aussi les marges intérieures et la bordure.  Bordure qui se trouve donc être la limite de la boite.

  • 5px+10px+450px+10px+5px=480px
  • 5px+10px+200px+10px+5px=230px

L’application d’une couleur de fond à notre élément, nous permet de constater que celle-ci s’applique également aux paddings mais pas aux margins qui sont situés à l’extérieur de la boite et donc de fait resteront toujours transparents.

L’espacement entre les boites:

Pour apporter une distance entre des boites nous utiliserons la propriété margin qui sert quant à elle à définir un espacement extérieur à la boite

code html pour l'espace entre les boitescode css pour l'espace entre les boites

Le code Css est le même que précédemment à la différence près qu’ici j’ai employé les raccourcis, vous remarquerez que nous suivons un sens horaire dans notre déclaration en commençant par le haut et que lorsque les 4 valeurs sont identiques nous pouvons ne l’écrire qu’une seule fois.

rendu navigateur pour l'espace entre les boites

La distance entre nos 2 paragraphes est donc définit par le margin-bottom de l’élément du haut et le margin-top de l’élément du dessous.

Il y a une spécificité à ceci qui est la fusion des marges nous la traiteront dans le prochain tutoriel.

Rodleg

Une réflexion au sujet de « Tuto Html et Css: Le modèle de boite »

  1. Ping : Tutoriel sur le modèle de boite | Rod-Leg

Laisser un commentaire

Entrez vos coordonnées ci-dessous ou cliquez sur une icône pour vous connecter:

Logo WordPress.com

Vous commentez à l'aide de votre compte WordPress.com. Déconnexion / Changer )

Image Twitter

Vous commentez à l'aide de votre compte Twitter. Déconnexion / Changer )

Photo Facebook

Vous commentez à l'aide de votre compte Facebook. Déconnexion / Changer )

Photo Google+

Vous commentez à l'aide de votre compte Google+. Déconnexion / Changer )

Connexion à %s