CSS - Inline Block : Un guide complet pour les débutants

Salut à toi, futur(e) développeur(-euse) web ! Aujourd'hui, nous allons plonger dans le merveilleux monde du inline-block en CSS. En tant que ton prof de informatique du coin, je vais te guider pas à pas à travers ce concept, avec pleins d'exemples pour que cela soit cristallin. Alors, prends ta boisson favorite, installe-toi confortablement, et partons ensemble dans cette aventure passionnante !

Qu'est-ce que l'Inline-Block ?

Avant de rentrer dans les détails, comprensons ce qu'est l'inline-block. Imagine que tu ranges des livres sur une étagère. Certains livres tu veux les faire debout (comme les éléments inline), et d'autres tu veux les poser à plat (comme les éléments block). Mais que faire si tu veux un livre debout ET qu'il occupe un espace spécifique ? C'est là que rentre en jeu l'inline-block !

La propriété CSS display: inline-block combine les caractéristiques des éléments inline et block. Elle permet aux éléments de se situer côte à côte comme les éléments inline, mais respecte également les propriétés de largeur et de hauteur comme les éléments block.

Regardons un exemple simple :

<style>
.inline-block-element {
display: inline-block;
width: 100px;
height: 100px;
margin: 10px;
background-color: #3498db;
}
</style>

<div class="inline-block-element"></div>
<div class="inline-block-element"></div>
<div class="inline-block-element"></div>

Dans cet exemple, nous avons créé trois éléments div avec la classe inline-block-element. Ils apparaîtront côte à côte (inline), mais nous pouvons également définir leur largeur et leur hauteur (block).

CSS Inline Block - Comportement Différent

Une des choses sympas à propos de l'inline-block est son comportement différent selon le contenu. Explorons cela avec un exemple :

<style>
.container {
font-size: 0; /* Cela enlève l'espace entre les éléments inline-block */
}
.box {
display: inline-block;
width: 100px;
height: 100px;
margin: 10px;
font-size: 16px; /* Réinitialise la taille de la police pour le contenu */
vertical-align: top; /* Aligne les boîtes en haut */
}
.box1 { background-color: #e74c3c; }
.box2 { background-color: #2ecc71; height: 150px; }
.box3 { background-color: #f39c12; }
</style>

<div class="container">
<div class="box box1">Box 1</div>
<div class="box box2">Box 2</div>
<div class="box box3">Box 3</div>
</div>

Dans cet exemple, nous avons créé trois boîtes avec des hauteurs différentes. Note que toutes s'alignent en haut grâce à vertical-align: top. Joue avec cette propriété pour voir comment elle affecte l'alignement !

CSS Inline Block - Liens de Navigation

Un usage commun de l'inline-block est pour créer des menus de navigation. Créons une barre de navigation simple :

<style>
nav {
background-color: #34495e;
padding: 10px;
}
nav a {
display: inline-block;
color: white;
text-decoration: none;
padding: 10px 20px;
margin-right: 5px;
background-color: #2c3e50;
}
nav a:hover {
background-color: #1abc9c;
}
</style>

<nav>
<a href="#">Accueil</a>
<a href="#">À propos</a>
<a href="#">Services</a>
<a href="#">Contact</a>
</nav>

Cela crée une jolie barre de navigation avec des liens cliquables. La propriété inline-block nous permet de définir des paddings et des marges sur ces éléments, ce qui ne serait pas possible avec uniquement inline.

CSS Inline Block - Groupes de Boutons

L'inline-block est parfait pour créer des groupes de boutons. Voici comment faire :

<style>
.btn-group {
font-size: 0; /* Enlève l'espace entre les boutons */
}
.btn {
display: inline-block;
padding: 10px 20px;
font-size: 16px;
background-color: #3498db;
color: white;
border: none;
cursor: pointer;
}
.btn:hover {
background-color: #2980b9;
}
.btn:first-child {
border-radius: 5px 0 0 5px;
}
.btn:last-child {
border-radius: 0 5px 5px 0;
}
</style>

<div class="btn-group">
<button class="btn">Gauche</button>
<button class="btn">Milieu</button>
<button class="btn">Droite</button>
</div>

Cela crée un joli groupe de boutons où les boutons sont raccordés sans couture.

CSS Inline Block - Images et Texte

L'inline-block est génial pour aligner des images avec du texte. Voyons comment :

<style>
.image-text {
margin-bottom: 20px;
}
.image-text img {
display: inline-block;
vertical-align: middle;
margin-right: 10px;
}
.image-text p {
display: inline-block;
vertical-align: middle;
width: calc(100% - 110px); /* Ajuste en fonction de la largeur de l'image */
}
</style>

<div class="image-text">
<img src="https://via.placeholder.com/100" alt="Image substitue">
<p>Ce sont quelques textes qui apparaissent à côté de l'image. La propriété inline-block nous permet d'aligner l'image et le texte verticalement.</p>
</div>

Cela crée une jolie mise en page avec une image alignée à côté du texte.

CSS Inline Block - Barres de Progression

Enfin, créons des barres de progression en utilisant l'inline-block :

<style>
.progress-container {
width: 300px;
background-color: #f3f3f3;
margin-bottom: 10px;
}
.progress-bar {
display: inline-block;
height: 20px;
background-color: #4caf50;
text-align: center;
line-height: 20px;
color: white;
}
</style>

<div class="progress-container">
<div class="progress-bar" style="width: 70%;">70%</div>
</div>
<div class="progress-container">
<div class="progress-bar" style="width: 40%;">40%</div>
</div>

Cela crée des barres de progression simples avec des indicateurs de pourcentage.

Conclusion

Et voilà, les amis ! Nous avons exploré la propriété polyvalente inline-block et ses diverses applications. De la barre de navigation aux barres de progression, cette propriété offre une manière flexible de disposer les éléments sur ta page web.

Souviens-toi, la clé pour maîtriser le CSS est la pratique. Alors, n'hesite pas à expérimenter avec ces exemples et à créer tes propres designs uniques. Bon codage !

Méthode	Description
display: inline-block	Combine les caractéristiques des éléments inline et block
vertical-align	Aligne les éléments inline-block verticalement
width et height	Peuvent être appliqués aux éléments inline-block
margin et padding	Peuvent être appliqués dans toutes les directions
Astuce de taille de police	Définir font-size: 0 sur le parent enlève les espaces entre les enfants inline-block

Credits: Image by storyset