Heim > Web-Frontend > CSS-Tutorial > Das Attribut „margin' hat keinen Einfluss auf Inline-Elemente

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

PHPz
Freigeben: 2024-02-18 16:36:24
Original
725 Leute haben es durchsucht

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>
Nach dem Login kopieren

CSS-Code lautet wie folgt:

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

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; /* 不会对行内元素产生效果 */
}
Nach dem Login kopieren

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!

Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage