Was bedeuten Inline-Eigenschaften?

Das Inline-Attribut bezieht sich auf das Inline-Stilattribut, und das Stilattribut gibt den Inline-Stil des Elements an. Da das Inline-Element auch ein Box-Modell hat, können für das Inline-Element unterschiedliche CSS-Attribute festgelegt werden. wie Breite, Höhe, Abstand und Ränder usw.

Das Stilattribut gibt den Inline-Stil des Elements an

Inline-Elementattributeinstellungen

Inline-Elemente haben auch ein Box-Modell

Inline-Elemente haben auch ein Box-Modell, sodass Sie verschiedene CSS-Attribute für Inline-Elemente festlegen können, wie z. B. Breite, Höhe, Abstand und Ränder Müssen Inline-Elemente diese Attribute also festlegen?

Festlegen der Breite und Höhe von Inline-Elementen

Es ist ungültig, die Breite und Höhe von Inline-Elementen festzulegen

.span1 {
    height: 200px;
    width: 200px;
}
 
<span class=&#39;span1&#39;>行内元素设置宽度和高度</span>

Derzeit haben wir Beachten Sie die Seite und das Feld. Im gerenderten Modell finden Sie Folgendes:

Auch wenn Breite und Höhe für das Inline-Element festgelegt sind, entsprechen die vom Inline-Element angezeigten spezifischen Breiten und Höhen der Breite und Höhe des Inhalt selbst, also legen Sie die Breite und Höhe für das Inline-Element fest. Hoch ist ungültig

Abstand und Rand des Inline-Elements

wirken sich auf die linke und rechte Seite aus, nicht jedoch auf die obere und untere Seite.

Inline-Elementeinstellung für Polsterung und obere und untere Randleistung für spezifische Werte

<span class=&#39;span2&#39;>行内元素设置边距上下属性</span><br>
 
.span2 {
    padding-top: 20px;
    padding-bottom: 30px;
    margin-top: 40px;
    margin-bottom: 50px;
}

Aus dem obigen Bild können wir erkennen, dass wir Polsterung oben, Polsterung unten, Rand oben und Rand festgelegt haben -bottom-Attribute für die Inline-Elemente, aber diese Attribute haben keine spezifische Auswirkung. Der Effekt scheint zu sein. Es wurde gestreckt, hatte aber keine Auswirkungen auf andere Elemente.

Legen Sie den Abstand und den Rand für Inline-Elemente fest.

wird einen Effekt haben

<span class=&#39;span3&#39;>行内元素设置边距左右属性</span><br>
 
.span3 {
    padding-left: 100px;
    padding-right: 200px;
    margin-left: 300px;
    margin-right: 400px;
}

Wie aus dem obigen Bild ersichtlich ist, Wenn wir padding-left, padding für Inline-Elemente festlegen, beeinflussen die Attribute -right, margin-left und margin-right die Position des Elements innerhalb der Zeile

Weitere Informationen zu diesem Thema finden Sie unter PHP Chinesische Website!

Das obige ist der detaillierte Inhalt vonWas bedeuten Inline-Eigenschaften?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!