Pourquoi « margin-top » fonctionne-t-il avec « inline-block » mais pas avec « inline

Pourquoi « margin-top » fonctionne-t-il avec « inline-block » mais pas avec « inline » ?

Mary-Kate Olsen

Libérer： 2024-11-27 10:10:10

original

974 Les gens l'ont consulté

Why Does `margin-top` Work with `inline-block` but Not with `inline`?

Pourquoi Margin-Top fonctionne avec Inline-Block mais pas avec Inline

Dans le développement Web, comprendre la différence entre inline et inline-block est crucial pour façonner le comportement des éléments sur une page. Cette question tente de clarifier l'écart dans l'application de la marge supérieure entre ces deux propriétés d'affichage.

Inline et Inline-Block

La spécification CSS2 définit inline comme une valeur qui représente éléments en ligne. Ces éléments apparaissent comme une ligne continue sans interruption. Inline-block, quant à lui, crée des conteneurs de blocs de niveau en ligne, ce qui signifie que ces éléments se comportent comme des blocs dans le formatage en ligne. Comme illustré dans la documentation CSS2 :

Inline : "Cette valeur amène un élément à générer une ou plusieurs boîtes en ligne."
Inline-block : "Cette valeur amène un élément à générer générer un conteneur de blocs de niveau en ligne L'intérieur d'un bloc en ligne est formaté comme une boîte de bloc et l'élément lui-même est formaté comme un niveau en ligne atomique. box."

Respect de la marge

De plus, la spécification CSS2 décrit le respect de la marge des éléments en ligne :

"Dans un formatage en ligne Dans ce contexte, les cases sont disposées horizontalement, les unes après les autres, en commençant par le haut d'un bloc conteneur. Les marges horizontales, les bordures et le remplissage sont respectés entre celles-ci. boxes."

Cette distinction explique pourquoi margin-top ne fonctionne pas avec les éléments en ligne. Les éléments en ligne sont limités au respect uniquement des marges horizontales, tandis que les éléments au niveau des blocs comme les blocs en ligne respectent à la fois les marges horizontales et verticales.

Exemple

Considérez le HTML et le CSS fourni dans la question :

<!DOCTYPE html>
<head>
  <link rel="stylesheet" type="text/css" href="MyFirstWebsite.css">
  <title>Max Pleaner's First Website</title>
</head>
<body>
  <h1>Welcome to my site.</h1>
</body>
</html>

Copier après la connexion

body {
  background-image: url('sharks.jpg');
}

h1 {
  background-color: #1C0245;
  display: inline;
  padding: 6.5px 7.6px;
  margin-left: 100px;
  margin-top: 25px;
}

Copier après la connexion

Dans ce cas, l'élément h1 n'affichera qu'une marge horizontale de 100px lorsque la propriété d'affichage est définie sur inline. Cependant, si la propriété display est modifiée en inline-block, la marge supérieure de 25 px sera appliquée, car l'élément h1 est alors traité comme un élément de niveau bloc dans le contexte en ligne.

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!