Le modèle des boîtes

Comment un navigateur calcule t-il les dimensions d’un bloc HTML ?

La surface totale du bloc est calculée par le navigateur en additionnant

• width
• padding
• border

La propriété width n’est pas la largeur totale du bloc si celui-ci possède un padding ou une border, ou les deux.

Le HTML

    <p>Lorem ipsum dolor sit sarah connor amet. Ut enim ut aliquip ex ea commodo consequat ad minim veniam.</p>
    

Le CSS

    
    p {
      width: 300px; 
      border: 5px solid #ff2a09; 
      padding: 20px; 
      background-color: orange;
    }
    

La largeur totale de la balise va être : 5 + 20 + 300 + 20 + 5 = 350 pixels, car il 5 pixels de bordure et 20 pixels de padding à gauche et à droite de la boîte de 300 pixels.