Heim >Web-Frontend >CSS-Tutorial >Wie verwende ich den Abstand, um den Absatzabstand in CSS anzupassen? (Codebeispiel)

Wie verwende ich den Abstand, um den Absatzabstand in CSS anzupassen? (Codebeispiel)

青灯夜游Original: 2018-10-10 14:31:094029Durchsuche

Wie stelle ich den Absatzabstand in CSS ein? Im vorherigen Artikel [Wie stelle ich den Absatzabstand in CSS ein? In Festlegen des Absatzabstands mit der Margin-Eigenschaft (Codebeispiel) ] haben wir vorgestellt, wie CSS äußere Ränder zum Festlegen und Anpassen des Absatzabstands verwendet. In diesem Kapitel stellen wir Ihnen vor, wie CSS innere Ränder zum Festlegen und Anpassen des Absatzabstands verwendet. Es hat einen gewissen Referenzwert. Freunde in Not können sich darauf beziehen. Ich hoffe, es wird Ihnen hilfreich sein.

Lassen Sie uns zunächst lernen, wie man den Abstand von CSS einstellt ?

Die CSS-Padding-Einstellung ist eigentlich sehr einfach. Sie können das CSS-Padding-Attribut verwenden, um dies zu erreichen:

padding : Ein Kurzattribut, das alle Auffüllungen des Elements gleichzeitig festlegen kann; es kann 1 bis 4 Werte haben, negative Werte sind nicht zulässig.

Beschreibung:

Das padding-Attribut legt die Breite aller Polsterungen des Elements oder die Breite der Polsterungen auf jeder Seite fest. Der für nicht ersetzte Inline-Elemente festgelegte Abstand hat keinen Einfluss auf die Berechnung der Zeilenhöhe. Wenn ein Element daher sowohl einen Abstand als auch einen Hintergrund hat, kann es sich optisch in andere Zeilen hinein erstrecken und möglicherweise andere Inhalte überlappen. Der Hintergrund des Elements erstreckt sich über die Polsterung. Negative Margenwerte sind nicht zulässig.

Ein kleines Beispiel:

padding:10px 5px 15px 20px;

padding setzt den oberen Abstand auf 10 Pixel, den rechten Abstand auf 5 Pixel, den unteren Abstand auf 15 Pixel und den linken Abstand auf 20 Pixel.

Der Abstand von CSS kann auch ohne Verwendung der Abkürzung „padding“ festgelegt werden, und der gesamte Abstand des Elements kann gleichzeitig festgelegt werden. Wir können einen Rand separat festlegen. Schauen wir uns also das an Eigenschaften zum separaten Einstellen der Polsterung:

Polsterung oben: Polsterung oben

Polsterung rechts: Polsterung rechts

Polsterung unten: Polsterung unten

Polsterung - links: linker Abstand

Lassen Sie uns anhand eines einfachen Codebeispiels im Detail erklären, wie Sie den Abstand zum Festlegen und Anpassen des Absatzabstands verwenden!

1. Verwenden Sie die Abkürzung für padding und legen Sie gleichzeitig den oberen und unteren Absatzabstand fest

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>内边距 调整 段落间距</title>
<style>
.a1{
padding: 20px 0px;
}
</style>
</head>
<body>
<p>第一段，没有设置段落间距。我是一段测试代码！我是一段测试代码！我是一段测试代码！我是一段测试代码！我是一段测试代码！我是一段测试代码！我是一段测试代码！我是一段测试代码！我是一段测试代码！</p>
<p>第二段，没有设置段落间距。我是一段测试代码！我是一段测试代码！我是一段测试代码！我是一段测试代码！我是一段测试代码！我是一段测试代码！我是一段测试代码！我是一段测试代码！我是一段测试代码！</p>
<p class="a1">第三段，设置上下段落间距。我是一段测试代码！我是一段测试代码！我是一段测试代码！我是一段测试代码！我是一段测试代码！我是一段测试代码！我是一段测试代码！我是一段测试代码！我是一段测试代码！</p>
<p>第四段，没有设置段落间距。我是一段测试代码！我是一段测试代码！我是一段测试代码！我是一段测试代码！我是一段测试代码！我是一段测试代码！我是一段测试代码！我是一段测试代码！我是一段测试代码！</p>
<p>第五段，没有设置段落间距。我是一段测试代码！我是一段测试代码！我是一段测试代码！我是一段测试代码！我是一段测试代码！我是一段测试代码！我是一段测试代码！我是一段测试代码！我是一段测试代码！</p>
</body>
</html>

Rendering:

Wie verwende ich den Abstand, um den Absatzabstand in CSS anzupassen? (Codebeispiel)

2 . Verwenden Sie padding-top und padding-bottom, legen Sie den oberen und unteren Abstand des Absatzes separat fest

<!DOCTYPE html>
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<title>内边距 调整 段落间距</title>
		<style>
			*{margin: 0px;padding: 0px;}
			.a1{
				padding-top: 20px;
			}
			.a2{
				padding-bottom: 20px;
			}
		</style>
	</head>
	<body>
	    <p>第一段，没有设置段落间距。我是一段测试代码！我是一段测试代码！我是一段测试代码！我是一段测试代码！我是一段测试代码！我是一段测试代码！我是一段测试代码！我是一段测试代码！我是一段测试代码！</p>
	    <p>第二段，没有设置段落间距。我是一段测试代码！我是一段测试代码！我是一段测试代码！我是一段测试代码！我是一段测试代码！我是一段测试代码！我是一段测试代码！我是一段测试代码！我是一段测试代码！</p>
	    <p class="a1">第三段，设置上段落间距。我是一段测试代码！我是一段测试代码！我是一段测试代码！我是一段测试代码！我是一段测试代码！我是一段测试代码！我是一段测试代码！我是一段测试代码！我是一段测试代码！</p>
	    <p class="a2">第四段，设置下段落间距。我是一段测试代码！我是一段测试代码！我是一段测试代码！我是一段测试代码！我是一段测试代码！我是一段测试代码！我是一段测试代码！我是一段测试代码！我是一段测试代码！</p>
	    <p>第五段，没有设置段落间距。我是一段测试代码！我是一段测试代码！我是一段测试代码！我是一段测试代码！我是一段测试代码！我是一段测试代码！我是一段测试代码！我是一段测试代码！我是一段测试代码！</p>
	</body>
</html>

Rendering:

Wie verwende ich den Abstand, um den Absatzabstand in CSS anzupassen? (Codebeispiel)

Zusammenfassung: Oben ist dieser Artikel Der gesamte Inhalt, ich hoffe, er wird für das Studium aller hilfreich sein. Weitere verwandte Tutorials finden Sie unter CSS-Video-Tutorial !

Verwandte Empfehlungen:

PHP-Video-Tutorial zum Gemeinwohltraining

Wie stelle ich den Zeilenabstand in CSS ein? Zeilenabstandseinstellung von CSS-Text (Codebeispiel)

Wie stelle ich den Textabstand in CSS ein? Ein einfacher Vergleich von Wortabstandsattributen und Buchstabenabstandsattributen

Das obige ist der detaillierte Inhalt vonWie verwende ich den Abstand, um den Absatzabstand in CSS anzupassen? (Codebeispiel). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

php css 外边距内边距 margin padding word

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：Wie vergrößere ich das Bild, indem ich die Maus in CSS3 bewege? (mit Code)Nächster Artikel：Wie vergrößere ich das Bild, indem ich die Maus in CSS3 bewege? (mit Code)

In Verbindung stehende Artikel

Mehr sehen