Sommaire

La Boîte:largeurlargeur et la Boîte:hauteurhauteur des Boîteboîtes

1. Les Boîte:dimensions du contenudimensions du contenu

La largeur et la hauteur du contenu des boîtes sont indiquées avec les Affichage:height Affichage:widthpropriétés width et height. Ces dimensions concernent strictement et exclusivement le contenu des boîtes.

images/C21-012.png

Ces dimensions se calculent toujours par rapport à l’élément parent qui peut être l’élément <body>, soit la largeur de la fenêtre du navigateur. Si la largeur de l’élément inclus est supérieure à celle de son élément parent, l’élément enfant conserve ses dimensions et "déborde" de son élément parent. Si ces dimensions ne sont pas renseignées, la boîte occupe toute la place disponible dans son élément parent.

Voici un exemple simple :

<!doctype html> 
<html lang="fr"> 
<head> 
   <meta charset="UTF-8"> 
   <title>Titre de la page</title> 
   <style> 
       p { 
           border: 1px solid black ; 
       } 
       #p-un { 
           width: 600px ; 
           height: 150px ; 
      ...