Heim > Web-Frontend > CSS-Tutorial > So verwenden Sie das CSS-Padding-Attribut

So verwenden Sie das CSS-Padding-Attribut

silencement
Freigeben: 2019-05-27 15:47:51
Original
4925 Leute haben es durchsucht

So verwenden Sie das CSS-Padding-Attribut

Definition und Verwendung von CSS-Auffüllattributen

In CSS ist das Auffüllattribut ein Kurzattribut, das zum Festlegen aller Auffüllattribute (Padding) verwendet wird. Definieren Sie die Eigenschaft für den oberen Rand, die Eigenschaft für den rechten Rand, die Eigenschaft für den unteren Rand und die Eigenschaft für den linken Rand in derselben Anweisung.

CSS-Padding-Attribut-Syntaxformat

1.padding: Attributwert 1 Attributwert 2 Attributwert 3 Attributwert 4

2. Auffüllung: Attributwert 1 Attributwert 2 Attributwert 3

3. Auffüllung: Attributwert 1 Attributwert 2

4. Auffüllung: Attributwert 1

Beschreibung :

1. Wenn das Padding-Attribut 4 Attributwerte hat: Die vier Attributwerte definieren jeweils den oberen Padding, den rechten Padding, den unteren Padding und den linken Padding

2. Wenn das Füllattribut drei Attributwerte hat: Attributwert 1 und Attributwert 3 definieren die obere bzw. untere Polsterung. Attributwert 2 definiert die rechte und linke Polsterung

3. Wenn das Polsterungsattribut zwei Attributwerte hat: Attributwert 1 definiert die obere und untere Polsterung. Attributwert 2 definiert die rechte und linke Polsterung

4 Wenn das Polsterungsattribut nur einen Attributwert hat: Dieser Attributwert definiert die obere Polsterung, rechte Polsterung, untere Polsterung, linke Polsterung

Mögliche Attributwerte

auto: Der Browser berechnet den Abstand

Länge: Gibt den Abstand in bestimmten Einheiten an Wert, wie Pixel, Zentimeter usw. (Standard ist 0px)

%: Gibt den Abstand basierend auf dem Prozentsatz der Breite des übergeordneten Elements an

inherit: Erbt den Wert des Padding-Attributs vom übergeordneten Element

Instanz

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>css padding属性设置元素内边距</title>
<style type="text/css">
div{width:260px;border:1px solid #000;padding:10px 20px 30px 40px;}
</style>
</head>
<body>
<div>padding属性设置元素内边距,这是为了演示效果所添加的文本。
padding:12px 14px 16px 18px;</div>
</body>
</html>
Nach dem Login kopieren

Laufergebnis

So verwenden Sie das CSS-Padding-Attribut

Das obige ist der detaillierte Inhalt vonSo verwenden Sie das CSS-Padding-Attribut. 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