CATALOGUE Code & Data Formation XHTML/CSS Apprendre CSS 3 Comprendre la Propriété CSS Display

Comprendre la Propriété CSS Display

Elément inline et inline-bloc
Vidéo non disponible ! Réessayez plus tard
Cette vidéo fait partie de la formation
Apprendre CSS 3
Revoir le teaser Je m'abonne
4,5
Transcription
Cette leçon fait partie de la formation
89,00€ Je commande
Formation incluse dans l'abonnement Elephorm Je m'abonne à Elephorm
DescriptionProgrammeAvis
4,5
Cette leçon fait partie de la formation
89,00€ Je commande
Formation incluse dans l'abonnement Elephorm Je m'abonne à Elephorm

Les Différents Types de Display

Objectifs

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.

Résumé

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

Description

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.

Voir plus

Questions fréquentes

Pourquoi le h2 avec display:inline se chevauche-t-il avec l'image?
Parce qu'un élément inline ne gère pas correctement les paddings et margins, ce qui conduit à un chevauchement des éléments.
Quelle propriété CSS permet de combiner les avantages d'inline et block ?
La propriété display:inline-block permet de combiner les comportements inline et block.
Quels sont les avantages de display:inline-block par rapport à display:inline ?
Display:inline-block permet d'appliquer des paddings et margins tout en gardant la structure inline de l'élément.

Programme détaillé

4 commentaires
4,5
4 votes
5
4
3
2
1
pierre.hiroux
Il y a 1 an
La formation est divisée en 90 modules sans lien entre eux et sans progression pédagogique. Il faut les réorganiser par thème pour donner plus de cohérence et donner de la progression pédagogique à la formation. Multiples fautes d'orthographe dans les textes.
henridjithat
Il y a 2 ans
Très bonne formation, étant débutant j'ai beaucoup appris.
yvan.vogel
Il y a 2 ans
J'en suis arrivé au bout.. Un vrai marathon. Très longue formation, à mon avis c'est plutôt 30h de cours et non pas 15h.
Après c'est une formation hyper claire et détaillée. L'auteur a fait un panorama complêt sur le CSS3.
g.vanleynseele
Il y a 4 ans
Cours très clair et très bien expliqué! Par contre il manque la moitié des fichiers de travail !