width, height

Dimensions.

Dans le code ci-dessous, quelles sont les dimensions totales, en pixels, occupées par la boîte ?
(par "totales", on entend ici qu'il faut tout compter, y compris les marges externes)

le code

<!DOCTYPE html>
<html lang="fr">

    <head>
        <meta charset="utf-8">
        <title> dimensions </title>
        <style>
            .boite{
                margin: 5px;
                border: 3px dotted green;
                padding: 2px;
                width: 100px;
                height: 50px;
                background-color: rgb(240,240, 100);
            }
        </style>
    </head>
    
    <body>
         <div class="boite"></div>
    </body>
</html>

Que désignent width et height ici ?

Aucune déclaration sur box-sizing n'est faite, il s'agit donc de la valeur par défaut (content-box).

largeur totale

La largeur totale :

total	120px
margin-left	5px
border-left	3px
padding-left	2px
content	100px
padding-right	2px
border-right	3px
margin-right	5px

hauteur totale

total	70px
margin-top	5px
border-top	3px
padding-top	2px
content	50px
padding-bottom	2px
border-bottom	3px
margin-bottom	5px

Une extension firefox pour "vérification par mesure"

Vous pouvez installer l'extension firefox (lire par exemple cette page) nommée MeasureIt et vérifiez (approximativement) avec cet outil les dimensions de la partie visible de la boîte.

En modifiant le code comme suit, vous pourrez approximativement obtenir, avec MeasureIt, les dimensions totales de notre boîte entre la bordure droite de la boîte 1 et la bordure gauche de la boîte 2.

<!DOCTYPE html>
<html lang="fr">

    <head>
        <meta charset="utf-8">
        <title> dimensions </title>
        <style>
			body{display:flex;}
			div{border:1px solid black;margin :0;}
            .boite{
                margin: 5px;
                border: 3px dotted green;
                padding: 2px;
                width: 100px;
                height: 50px;
                background-color: rgb(240,240, 100);
            }
        </style>
    </head>
    
    <body>
         <div>1</div>
         <div class="boite"></div>
		 <div>2</div>
    </body>
</html>

Dimensions 2.

Dans le code ci-dessous, quelles sont les dimensions totales, en pixels, occupées par la boîte ?

le code

<!DOCTYPE html>
<html lang="fr">

    <head>
        <meta charset="utf-8">
        <title> dimensions </title>
        <style>
            .boite{
                box-sizing: border-box;
                margin: 5px;
                border: 3px dotted green;
                padding: 2px;
                width: 100px;
                height: 50px;
                background-color: rgb(240,240, 100);
            }
        </style>
    </head>
    
    <body>
         <div class="boite"></div>
    </body>
</html>

Que désignent width et height dans ce cas ?

Il faut maintenant tenir compte de la déclaration box-sizing: border-box;.

largeur totale

total	110px
margin-left	5px
border-left	3px
padding-left	2px
content	(100-6-4)px = 90px
padding-right	2px
border-right	3px
margin-right	5px

hauteur totale

total	60px
margin-top	5px
border-top	3px
padding-top	2px
content	(50-6-4)px = 40px
padding-bottom	2px
border-bottom	3px
margin-bottom	5px

Vérification par MeasureIt

Prenez le temps de vérifier avec MeasureIt ci-dessous.

<!DOCTYPE html>
<html lang="fr">

    <head>
        <meta charset="utf-8">
        <title> dimensions </title>
        <style>
			body{display:flex;}
			div{border:1px solid black;margin :0;}
             .boite{
                box-sizing: border-box;
                margin: 5px;
                border: 3px dotted green;
                padding: 2px;
                width: 100px;
                height: 50px;
                background-color: rgb(240,240, 100);
            }
        </style>
    </head>
    
    <body>
         <div>1</div>
         <div class="boite"></div>
		 <div>2</div>
    </body>
</html>

Dimensions 3.

Modifier le css pour que les deux boîtes de type article :

flottent l'une à côté de l'autre,
soient, chacune, entourées d'une bordure rouge de 3px,
occupent chacune 50% de l'espace horizontal.

Pour le flottement, on pourra consulter la page de w3schools sur float.

le code

<!DOCTYPE html>
<html lang="fr">
    <head>
        <meta charset="utf-8">
        <title> 50-50 </title>
        <style>
        
        </style>
    </head>
    <body>
         <article> 
            <p> bla bla</p> 
            <p> bli bli</p> 
            <p> blu blu</p> 
            <p> ble ble</p> 
            <p> blo blo</p> 
          </article>
            
           <article> 
            <p> bla bla</p> 
            <p> bli bli</p> 
            <p> blu blu</p> 
            <p> ble ble</p> 
            <p> blo blo</p> 
          </article>
    </body>
</html>

Aide

On déclare box-sizing : border-box; afin que le 50% indique bien l'ensemble de la boîte (bordure, marge interne, contenu).

Aide

Donner une règle article:first-of-type{float: left;} de flottement à gauche pour le premier article.

Une solution

<!DOCTYPE html>
<html lang="fr">
    <head>
        <meta charset="utf-8">
        <title> 50-50 </title>
        <style>
            article{
            float: left;
            margin: 0;
            border: 3px solid red;
            box-sizing : border-box;
            width : 50%;
        }
        </style>
    </head>
    <body>
         <article> 
            <p> bla bla</p> 
            <p> bli bli</p> 
            <p> blu blu</p> 
            <p> ble ble</p> 
            <p> blo blo</p> 
          </article>
            
           <article> 
            <p> bla bla</p> 
            <p> bli bli</p> 
            <p> blu blu</p> 
            <p> ble ble</p> 
            <p> blo blo</p> 
          </article>
    </body>
</html>

Essayez d'effacer la déclaration box-sizing : border-box; : la seconde boîte devra alors se placer sous la première, car cette première boîte occupera alors déjà plus de 50% de la largeur du conteneur (ce sera le content qui occupera 50%, les marges internes et bordures feront déborder des 50%).