Heim > Artikel > Web-Frontend > 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:092794Durchsuche

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!

Stellungnahme：

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

Vorheriger Artikel：Schritte zum Implementieren der Reflektion mit CSS3Nächster Artikel：Schritte zum Implementieren der Reflektion mit CSS3

In Verbindung stehende Artikel

Mehr sehen