Heim >Web-Frontend >CSS-Tutorial >Beispiel-Tutorial für „Margin-Top' in der Webseitenproduktion
Beispiel-Tutorial für „Margin-Top' in der Webseitenproduktion
- php中世界最好的语言Original
- 2017-12-01 14:44:092841Durchsuche
In HTML dient margin-top dazu, den Abstand zwischen dem Objekt und dem vorherigen Objekt festzulegen. Es dient dazu, den Abstand außerhalb des Objektrands im CSS-Stil festzulegen. Heute führe ich Sie durch die Syntax von margin-top
margin-top
.div{margin-top:10px}
legt das Objekt „.div“ fest. Der Abstand beträgt 10 Pixel
Verwandte Tutorials: Rand
2. Beispiel für eine Rand-oben-Anwendung
Um den Effekt zu beobachten, werden im Beispiel 3 DIV-Boxen eingerichtet, alle mit Gleiche Breite und Höhe, gleicher CSS-Rand, margin-top:10px für die zweite div-Ebene festlegen; margin-top:20px für die dritte div-Ebene festlegen, den Effekt beobachten und den Effekt des margin-top-Stils verstehen. Die drei Objektebenen sind DIV-Klassen mit den Namen „.div1“ „.div2“ „.div3“
Beispiel für vollständigen HTML+CSS-Code
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>margin-top在线实例</title>
<style>
.div1,.div2,.div3{ width:300px; height:80px; border:1px solid #F00}
/* css 注释说明：设置三对象相同宽度 高度 红色边框 */
.div2{ margin-top:10px}/* css注释说明：设置对象距离上对象10px间距 */
.div3{ margin-top:20px}/* div css注释说明：设置对象距离上对象20px间距 */
</style>
</head>
<body>
<div class="div1"></div>
<div class="div2"></div>
<div class="div3"></div>
</body>
</html>margin-top dient zum Festlegen des Objektabstands Einstellung des Objektabstands. Wenn das Objekt keinen Hintergrund oder Rand hat, können Sie stattdessen padding-top verwenden.
Ich glaube, dass Sie die Methoden beherrschen, nachdem Sie diese Fälle gelesen haben. Weitere spannende Informationen finden Sie in anderen verwandten Artikeln auf der chinesischen PHP-Website!
Verwandte Lektüre:
So verwenden Sie das Transformationsverlaufsattribut in CSS3
Schritte zum Implementieren des Effekts der dynamischen Erstellung Schalter in CSS3
Schritte zur Implementierung der Animationstechnologie in CSS3
Das obige ist der detaillierte Inhalt vonBeispiel-Tutorial für „Margin-Top' in der Webseitenproduktion. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!