Das Attribut „margin“ hat keinen Einfluss auf Inline-Elemente

Margin hat eine andere Auswirkung auf Inline-Elemente als auf Elemente auf Blockebene. In Inline-Elementen wirkt sich das Randattribut nur auf die vertikalen oberen und unteren Ränder aus, nicht auf die horizontalen linken und rechten Ränder.

Zum Beispiel gibt es in HTML ein Absatzelement <p></p>, wir können einige Stile dafür festlegen und die Auswirkung des Randattributs darauf beobachten.

HTML-Code lautet wie folgt:

<p class="example">这是一个段落</p>

CSS-Code lautet wie folgt:

.example {
  margin: 20px;
  background-color: lightblue;
  display: inline;
  padding: 10px;
}

Der obige Code legt ein Absatzelement mit der Klasse „example“ fest und legt einen 20-Pixel-Rand dafür fest. Die Hintergrundfarbe ist hellblau auf 10 Pixel und setzen Sie sein Anzeigeattribut auf das Inline-Element.

Wenn Sie den obigen Code im Browser ausführen, werden wir feststellen, dass das Randattribut für den oberen und unteren Rand von Inline-Elementen wirksam ist und das Absatzelement oben und unten einen Rand von 20 Pixeln hat.

Wenn wir jedoch versuchen, den linken und rechten Rand für Inline-Elemente festzulegen, werden wir feststellen, dass der festgelegte Randwert keine Auswirkungen auf die Inline-Elemente hat. Versuchen Sie zum Beispiel den folgenden Code:

.example {
  margin: 20px 50px; /* 不会对行内元素产生效果 */
}

Im Beispielcode versuchen wir, 20 Pixel obere/untere Ränder und 50 Pixel linke/rechte Ränder für Inline-Elemente festzulegen, aber der Browser zeigt diese Ränder nicht an.

Es ist zu beachten, dass dieses Phänomen nicht bedeutet, dass das Margin-Attribut für Inline-Elemente völlig ungültig ist. Mit Hilfe anderer CSS-Eigenschaften und -Techniken wie Padding-Eigenschaften, Anzeigeeigenschaften und Pseudoelementen können wir dennoch ähnliche Effekte erzielen.

Das obige ist der detaillierte Inhalt vonDas Attribut „margin“ hat keinen Einfluss auf Inline-Elemente. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!