Propriétés des bords, marges et contenu

Modèle de boîte CSS

Chaque élément génère de 0 à N boîtes (généralement 1)

Propriétés

• • border-width: 0.5em; border-style: solid; border-color: green; margin: 1em
  • border: 0.5em solid green; margin: 1em
  • border: 0.5em dotted green; margin: 1em
  • border: 0.5em dashed green; margin: 1em
  • border: 0.5em double green; margin: 1em
  • border: 0.5em groove green; margin: 1em
  • border: 0.5em ridge green; margin: 1em
  • border: 0.5em inset green; margin: 1em
  • border: 0.5em outset green; margin: 1em
  • border-top: thick red double; border-right: 1em blue ridge; margin: 1em
• • padding-right: 1em; border: 0.1em solid green; background:#EFE
  • padding-bottom: 1em; border: 0.1em solid green; background:#EFE
  • padding-left: 1em; border: 0.1em solid green; background:#EFE
  • padding-top: 5%; border: 0.1em solid green; background:#EFE
  • padding: 1em; border: 0.1em solid green; background:#EFE
  • padding: 1em 2em; border: 0.1em solid green; background:#EFE
• • margin-right: 1em; border: 0.1em solid green
  • margin-bottom: 1em; border: 0.1em solid green
  • margin-left: 1em; border: 0.1em solid green
  • margin-top: 1em; border: 0.1em solid green
  • margin: 1em; border: 0.1em solid green
  • margin: 1em 2em; border: 0.1em solid green
• • width: auto; border: 0.1em solid green
  • width: 10em; border: 0.1em solid green
  • width: 50%; border: 0.1em solid green
• • height: auto; border: 0.1em solid green
  • height: 3em; border: 0.1em solid green

Notes sur la largeur

• L'égalité
  width du parent = margin-left + border-left-width + padding-left + width + padding-right + border-right-width + margin-right
  est toujours vraie
• MSIE 5.x ne respecte pas cette égalité ; pour lui
  width = border-left-width + padding-left + largeur + padding-right + border-right-width
  Il existe un Box Model Hack.