Accueil Formations Apprendre CSS 3

Comprendre la Propriété CSS Display

Retour à la formation
Chapitre 26 Leçon 3
Précédent
Suivant

Explorez les différentes valeurs de la propriété CSS display, telles que display-inline, et leurs impacts sur le layout des éléments.

Détails de la leçon

Description de la leçon

La leçon d'aujourd'hui se focalise sur la propriété CSS display, un élément fondamental du design web. Nous avons déjà vu display:block et display:none, mais aujourd'hui, nous allons explorer display:inline et ses implications.

Nous observerons comment les titres de sections (h2) peuvent être configurés pour s'adapter au contenu, plutôt que d'étendre leur fond de couleur sur toute la largeur de leur conteneur. En appliquant display:inline à un h2, nous noterons un comportement spécifique : si cet élément se chevauche avec d'autres éléments comme une image, c'est parce que les éléments inline ne gèrent pas les padding et margins de façon attendue.

Pour surmonter cette limitation, nous introduisons display:inline-block, une combinaison des comportements inline et block. Ce mode respecte les dimensions de l'élément tout en permettant l'application de marges et de paddings, assurant ainsi une mise en page cohérente et esthétique.

Objectifs de cette leçon

Les objectifs de cette vidéo sont :

1. Comprendre les différences entre display:inline et display:inline-block.
2. Apprendre à utiliser ces propriétés pour résoudre des problèmes de mise en page.

Prérequis pour cette leçon

Avant de suivre cette vidéo, il est recommandé d'avoir une connaissance de base en HTML et CSS, et d'être familier avec les concepts de mise en page web.

Métiers concernés

Les compétences abordées dans cette vidéo sont essentielles pour les développeurs front-end, les web designers, et les intégrateurs web.

Alternatives et ressources

Pour des alternatives à ces propriétés, vous pouvez explorer les flexbox ou le grid layout pour des mises en page plus complexes et adaptables.

Questions & Réponses

Parce qu'un élément inline ne gère pas correctement les paddings et margins, ce qui conduit à un chevauchement des éléments.
La propriété display:inline-block permet de combiner les comportements inline et block.
Display:inline-block permet d'appliquer des paddings et margins tout en gardant la structure inline de l'élément.