Pourquoi Margin-Top ne fonctionne-t-il pas sur les éléments en ligne, mais bien sur les éléments en bloc en ligne ?

Inline vs Inline-Block : pourquoi Margin-Top ne fonctionne qu'avec Inline-Block

La question

Lors de l'utilisation de HTML et CSS, un l'utilisateur tente de créer une marge supérieure pour un

élément, mais il n'apparaît que lorsque la propriété CSS display est définie sur inline-block, pas lorsqu'elle est définie sur inline.

Explication

La spécification CSS définit la différence entre inline et inline-block comme suit :

• inline-block : Crée un conteneur de blocs de niveau en ligne où le le contenu interne de l'élément est formaté comme une boîte de bloc et l'élément lui-même est formaté comme une boîte de niveau en ligne.
• inline : génère une ou plusieurs boîtes en ligne.

La spécification CSS2 stipule que les éléments en ligne ne respectent que les marges horizontales (par exemple, margin-left).

La distinction

La différence réside dans la manière dont les éléments en ligne et en ligne sont traités :

• En ligne les éléments sont considérés comme de véritables éléments en ligne, les éléments de bloc en ligne sont traités comme des blocs, mais sont visuellement alignés avec un un autre.
• Les éléments de niveau bloc (comme inline-block) respectent les marges horizontales et verticales, tandis que les éléments en ligne ne respectent que les marges horizontales.

Résolution

Par conséquent , dans le cas prévu, définir l'affichage sur en ligne sur le

L'élément applique uniquement les marges horizontales, ce qui n'inclut pas la marge supérieure. Cependant, définir l'affichage sur inline-block permet d'appliquer des marges horizontales et verticales, y compris la marge supérieure.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!