Quiz CSS

Quelle est la particularité du positionnement des éléments de type block ?

Les éléments de type block ont comme particularité de ne jamais se mettre sur une même ligne

Quelle est la particularité des éléments de type inline ?

Les éléments de type inline, comme leur nom l'indique, viennent toujours se placer sur une même ligne, à la différence des éléments de type block

Quelle propriété CSS permet de modifier la nature des éléments et donc leur positionnement ?

La propriété qui permet de modifier la nature des éléments est la propriété display, on dit d'ailleurs qu'on modifie le display des éléments.

Supposons que j'ai plusieurs articles que je souhaite mettre sur une même ligne, que dois-je écrire en CSS ?

Les articles sont naturellement des éléments de type block. Avec display inline-block nous pouvons les faire passer en ligne mais conserver toutes leurs propriétés d'éléments block

Maintenant je souhaite que ces articles soient alignés en haut de leur container, que dois-je écrire ?

Quand des éléments sont en display inline-block, ils viennent naturellement se placer sur une ligne de base en bas de leur container. Pour règler leur position verticale, nous pouvons utiliser la propriété vertical-align.

Qu'est ce qu'un élément floattant ?

Il est très fréquent de voir sur des blogs du texte entourer une image. Les images sont dites flottantes, c'est-à-dire qu'elle sont collées à droite ou à gauche de leur container et les éléments qui les suivent viennent se placer autour.

Je souhaite faire flotter une image à droite, je peux écrire

Pour faire flotter un élément en CSS, on utilise la propriété float qui prend comme valeur la direction gauche (left) ou droite (right)

Je souhaite empêcher que le paragraphe après mon image vienne l'entourer comment puis-je faire ?

En CSS la propriété clear permet de contrer le float, elle s'applique sur l'élément censé entourer l'élément flottant. Elle prend comme valeur la direction du float ou both