Exercice 3/25
- Dans le fichier
stylesheet.css(ligne 6), changez la valeur de la propriétédisplayàinline-blockpour tous les élémentsdiv; - Cliquez sur soumettre ma réponse pour vérifier vos résultats;
Leçon 3/25
Si vous ne constatez pas beaucoup de différence, c'est normal. Les div sont par défaut des éléments de type block.
Comme indiqué, tout élément qui se positionne comme un bloc viendra automatiquement occuper toute la largeur de la page, quel que soit le contenu (ou le peu de contenu) que vous aurez mis à l'intérieur.
Mais, si vous spécifiez un affichage de type inline-block, les éléments html vont venir se positionner les uns à côté des autres.
Commentaires les mieux notés
8 Commentaires
-
mram Admin
le 17/02/2017 à 12h10
-
lucswim
Pourquoi vous écrivez "Comme indiqué, tout élément qui se positionne comme un bloc viendra automatiquement occuper toute la largeur de la page" c'est pas plutôt la longueur de la page?le 15/02/2017 à 15h18
index.html
stylesheet.css
<!DOCTYPE html>
<html>
<head>
<link type="text/css" rel="stylesheet" href="stylesheet.css" />
<title>Inline-block</title>
</head>
<body>
<div id="un"></div>
<div id="deux"></div>
<div id="trois"></div>
<div id="quatre"></div>
</body>
</html>
div {
height: 50px;
width: 100px;
border: 2px solid black;
border-radius: 5px;
display: block;
}
#un {
background-color: #4D94FF;
}
#deux {
background-color: #3385FF;
}
#trois {
background-color: #1975FF;
}
#quatre {
background-color: #0066FF;
}
C'est bien la largeur de la page dont on parle (sur l'axe X) de la bordure gauche à la bordure droite.