Les boîtes
C'est quoi?
Les DIV et SPAN
Ces éléments ne servent pas à structurer et donner du contenu.
Ils vont servir de conteneurs et faciliter la mise en forme d’une page HTML.
Les DIV et SPAN
La DIV est un élément de type block:
Commence à la ligne, prend toute la largeur, contient d'autres éléments de type block et inline.
La SPAN est un élément de type inline:
s'insère dans une ligne et prend la largeur du contenu.
EXEMPLE
<div class="container">
<p>Je suis le 1er para</p>
<p>
Je suis <span class="smallContainer">le 2eme</span>
para
</p>
</div>EXEMPLE
.container {
background-color: yellow;
color: red;
}
.smallContainer {
background: lightblue;
}
Regarde dans ton drive ;)
attends 2 sec wesh!!
Exo
Les dimensions
Les boîtes disposent d'une largeur et d'une hauteur, on va pouvoir les définir avec les propriétés suivantes:
-
width = largeur
-
height = hauteur
EXEMPLE
.container {
background-color: yellow;
color: red;
width: 650px;
height: 400px;
}Il y a 2 types de marges:
-
padding = marge intérieure
-
margin = marge extérieure
EXEMPLE
.container {
background-color: yellow;
color: red;
width: 600px;
height: 400px;
border: 4px solid black;
padding: 50px;
margin: 100px;
}
Ca arrive dans ton drive wesh :p