Instructions

A l'aide de l'inspecteur de votre navigateur, identifiez les paramètres du box modèle appliqués aux élements de cette page. Repérez ceux pour lesquels on a spécifié un style, et identifiez ceux qui se sont vu appliquer un style par défaut par le navigateur.

NE CLIQUEZ PAS SUR CE LIEN

Questions

• As-tu remarqué que les couleurs ont une signification ?
• Quel est l'impact du div#content sur la mise en page ?
• Pourquoi le "align-center" du lien #danger ne fonctionne-t-il pas ?
• Pourquoi tu as cliqué sur le lien? 😉
• Quelle est la différence entre un <div> et un <span> ?
• Détaille le "box-model" appliqué par défaut au body

Questions d'interro

Série de 10 questions sur les éléments inline et block du box modèle HTML

1. Qu'est-ce que le box modèle en HTML et CSS ?

2. Quelle est la différence entre un élément inline et un élément block en HTML ?

3. Donnez trois exemples d'éléments inline et trois exemples d'éléments block.

4. Comment les éléments inline et block se comportent-ils par rapport à la largeur et la hauteur ?

5. Quelle différence y a-t-il dans le box modèle entre un élément inline et block en termes de marges et de padding ?

6. Comment un élément inline et un élément block impactent-ils le flux de mise en page (flow) dans HTML ?

7. Peut-on appliquer des marges horizontales à un élément inline ? Pourquoi ou pourquoi pas ?

   • Réponse attendue : Oui, les marges horizontales sont appliquées aux éléments inline, mais les marges verticales ne sont pas respectées.

Crée cette page:

Indices

• https://developer.mozilla.org/fr/docs/Learn/CSS/Building_blocks/The_box_model
• https://developer.mozilla.org/fr/docs/Tools/Page_Inspector/How_to/Examine_and_edit_the_box_model
• https://www.pierre-giraud.com/centrer-horizontalement-verticalement-element-html-css/