Outils pour utilisateurs

Outils du site


cours2012:concepts_et_outils_pour_internet:des_blocs_et_des_marges

Voir cette page sous forme de diaporama.

Of blocks and margins

Des blocs est des marges

Sommaire

  • Les marges “colapse”
  • Et elles débordent
  • margin ou padding
  • Eviter le débordement des marges
  • Le cas HTML et BODY

Les marges "colapse"

Et elles débordent

<style>
.pour-h1 { background-color:red}
.pour-h2 { background-color:green}
</style>
 
<div class="pour-h1"><h1>Un titre</h1></div>
<div class="pour-h2"><h2>Un autre</h2></div>

margin ou padding

  • Eviter les margin !
    • Si padding convient == moins de surprise
  • margin : repousser le texte
  • padding : laisser un espace (une marge)

Eviter le débordement des marges

Ne se produit pas si l'élément parent à :

  • un bord (border)
  • ou un padding
  • ou simplement : overflow: auto ?!

Le cas ''HTML'' et ''BODY''

  • Mettre :

<code css> html { height:100%; }

  • Fait que l'élément HTML à la hauteur de la fenêtre (viewport)
    • Par défaut il permet de faire défiler (overflow:auto;)
  • BODY est le document, il fait la hauteur du contenu
cours2012/concepts_et_outils_pour_internet/des_blocs_et_des_marges.txt · Dernière modification: 2012/10/13 22:00 (modification externe)