width, height - Exercices

Dimensions.

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

<!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"></class>
    </body>
</html>

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

Dimensions 2.

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

<!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"></class>
    </body>
</html>

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

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.

<!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>

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

Essayez d'effacer cette 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%).

<!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>