Créez trois <div> avec les dimensions suivantes :
<div> : largeur de 300px, hauteur de
150px, fond rouge clair.
<div> : largeur de 50%, hauteur minimale
de 100px, fond vert clair.
<div> : largeur maximale de 500px,
hauteur de 10em, fond bleu clair.
Indice : Utilisez les propriétés width,
height, min-height, et max-width.
<style>
/* Votre code CSS ici */
</style>
<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>Corrigé :
<style>
.box1 {
width: 300px;
height: 150px;
background-color: lightcoral;
}
.box2 {
width: 50%;
min-height: 100px;
background-color: lightgreen;
}
.box3 {
max-width: 500px;
height: 10em;
background-color: lightblue;
}
</style>
Explication : Les unités px,
%, et em permettent de définir des
dimensions fixes, relatives ou basées sur la taille de la police.
Appliquez les marges suivantes aux trois <div> :
<div> : marge inférieure de 20px.<div> : marge gauche de 30px.<div> : marge de 10px sur tous les côtés.
Indice : Utilisez la propriété margin.
<style>
/* Votre code CSS ici */
</style>
<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>Corrigé :
<style>
.box1 {
margin-bottom: 20px;
}
.box2 {
margin-left: 30px;
}
.box3 {
margin: 10px;
}
</style>
Explication : La propriété
margin contrôle l'espace extérieur autour d'un élément.
Ajoutez des bordures aux trois <div> :
<div> : bordure solide noire de 2px.
<div> : bordure pointillée rouge de 3px,
coins arrondis de 10px.
<div> : bordure double bleue de 5px,
uniquement en haut et en bas.
Indice : Utilisez les propriétés border,
border-radius, border-top, et
border-bottom.
<style>
/* Votre code CSS ici */
</style>
<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>Corrigé :
<style>
.box1 {
border: 2px solid black;
}
.box2 {
border: 3px dotted red;
border-radius: 10px;
}
.box3 {
border-top: 5px double blue;
border-bottom: 5px double blue;
}
</style>
Explication : La propriété border permet
de styliser les contours d'un élément.
Ajoutez du rembourrage aux trois <div> :
<div> : rembourrage uniforme de 15px.
<div> : rembourrage de 10px en haut et en
bas, 20px à gauche et à droite.
<div> : rembourrage de 5px en haut, 10px
à droite, 15px en bas, 20px à gauche.
Indice : Utilisez la propriété padding.
<style>
/* Votre code CSS ici */
</style>
<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>Corrigé :
<style>
.box1 {
padding: 15px;
}
.box2 {
padding: 10px 20px;
}
.box3 {
padding: 5px 10px 15px 20px;
}
</style>
Explication : La propriété
padding contrôle l'espace intérieur entre le contenu et
la bordure.
Créez une <div> avec les propriétés suivantes :
Indice : Combinez les propriétés width,
height, margin, border, et
padding.
<style>
/* Votre code CSS ici */
</style>
<div class="box"></div>Corrigé :
<style>
.box {
width: 400px;
height: 200px;
margin: 20px;
border: 1px solid gray;
padding: 15px;
background-color: lightyellow;
}
</style>Explication : Cet exercice combine toutes les propriétés du box model.