So verwenden Sie das Padding-Attribut in CSS

Padding是比较常用CSS样式，我们可以利用padding样式来设置内边距，下面我们从基础语法到应用示范最后举一个小列子来给大家说一下padding样式如何使用，

padding语法结构与说明  

padding : +数值+单位 或 百分比数值

div{padding:5px}设置对象距离四边边距为5px间隔

同时可以单独设置左、右、上、下边距离发布设置

1、padding-left 设置对象距离左边的边距补白间隔

div{padding-left:5px}

对象内距离左边补白间距为5px

2、padding-right 设置对象距离右边的边距补白间隔

div{padding-right:5px}

对象内距离右边补白间距为5px

3、padding-top 设置对象距离上边的边距补白间隔

div{padding-top:5px}

对象内距离上边补白间距为5px

4、padding-bottom 设置对象距离下边的边距补白间隔

div{padding-bottom:5px}

对象内距离下边补白间距为5px

div css Padding说明

检索或设置对象四边的补丁边距。

如果提供全部四个参数值，将按上－右－下－左的顺序作用于四边。

如果只提供一个，将用于全部的四条边。

如果提供两个，第一个用于上－下，第二个用于左－右。

如果提供三个，第一个用于上，第二个用于左－右，第三个用于下。

内联对象要使用该属性，必须先设定对象的height或width属性，或者设定position属性为absolute。

Padding的值不能为负值。

Padding位于对象（边框）以内，或这样说padding样式是位于对象内的内容区域与边框之间。

padding设置四边用法案例 

为了对padding用法进一步了解，我们设置一个对象分别设置4边不同的padding补白间距，并且设置对象CSS宽度，css 高度、CSS边框属性样式。为了便于观察padding存在，我们设置padding-left（左）为20px,padding-right（右）为30px，padding-top（上）为40px，padding-bottom（下）为50px。

1、padding案例CSS代码

 

2、案例HTML代码

padding使用案例

4. Fallzusammenfassung

Auffüllen wird verwendet, um den Stil des Abstands zwischen dem vierseitigen Rand und dem Inhaltsbereich innerhalb des Objekts festzulegen, um so einen Abstand innerhalb des Objekts zu erreichen kann CSS div + padding verwenden.

3. Polsterabkürzung und Hüllen

Die vier Seiten haben die gleichen Polsterabkürzungen

Wenn die Polstereinstellungen auf den vier Seiten sind gleich, zum Beispiel 5px, Originalausdruck:

padding-left:5px;padding-right:5px;padding-top:5px;padding-bottom:5px;

kann in CSS abgekürzt werden als:

padding:5px;

2. Abkürzungen für unterschiedliche Polsterung auf den vier Seiten

Genau wie die unterschiedlichen Polsterungswerte auf den vier Seiten in unserem zweiten Tutorial, padding-left:20px;padding-right:30px;padding-top:40px;padding-bottom:50px

Wir können es abkürzen als:

Padding:40px 30px 50px 20px;

Beachten Sie, dass jeder Wert durch ein Leerzeichen getrennt ist

Erklären Sie die jeweiligen Bedeutungen

Die ersten 40px stehen für „oben“ padding-top:40px;

Die zweiten 30 Pixel stehen für „rechts“ padding-right:30px;

Die dritten 50 Pixel stehen für „unten“ padding-bottom:50px;

Die vierten 20 Pixel stehen für „links“ padding-left:20px;

3. Die linke und rechte Seite sind gleich, oben und unten Abkürzung für Polsterung mit unterschiedlichen Werten

Wenn die Polsterung links und rechts 10 Pixel beträgt, 20px oben und 30px unten

Allgemeines Schreiben:

padding-left:10px; padding-right:10px;padding-bottom:30px

Die Abkürzung kann sein:

Padding:20px 10px 30px;

Die ersten 20px stehen für die Polsterung oben,

Die zweiten 10px stehen für die Polsterung -left und padding-right, also 10px

Die dritten 30px stellen padding-bottom dar: 30px

Drei Seiten gleich, eine Seite hat einen anderen Wert

Wir können immer noch alle drei Seiten mit demselben Wert und die andere Seite mit unterschiedlichen Werten abkürzen.

EXP

Wenn der Abstand oben und links 10 Pixel und unten 20 Pixel beträgt, wird der CSS-Stil normalerweise so geschrieben:

padding-left:10px; padding-right:10px;padding -top:10px;padding-bottom:20px

wird abgekürzt als:

padding:10px;padding-bottom:20px

Beachten Sie das Die Reihenfolge kann nicht umgekehrt werden. Der Leser liest von oben nach unten und von links nach rechts, sodass wir zunächst die vier Seiten gleich einstellen und dann auf der anderen Seite einen anderen Stilwert hinzufügen können.

Erweiterte Lektüre:

1. HTML-Komprimierungsoptimierung

3. CSS-Optimierung

4 Wortabstand

Padding-CSS-Zusammenfassung

Padding-Stil ist ein CSS-Stilattribut, das wir häufiger verwenden. Im Allgemeinen verwenden wir Padding, um den oberen, unteren, linken und rechten Rand innerhalb eines Objekts festzulegen . Wenn wir auf die Einrückung des Anfangstextes stoßen, können wir natürlich den CSS-Stil

text-indent

verwenden. Achten Sie bei der Verwendung von Polsterungen auf die Vergrößerung oder Verringerung der Breite und Höhe. Wenn die Gesamtbreite 500 Pixel beträgt und links und rechts ein Füllstil von 10 Pixeln festgelegt ist, wird die Breite des Inhaltsbereichs angepasst 480px. Achten Sie bei der Verwendung des Stils gleichzeitig auf die Bedeutung der Abkürzung PADDING. Versuchen Sie, CSS-Abkürzungen wie zu verwenden. Für aufregendere Inhalte achten Sie bitte auf andere Verwandte Artikel auf der chinesischen PHP-Website!

Verwandte Lektüre:

So legen Sie die Zeilenhöhe und den Zeilenabstand des p-Absatzes in HTML fest

So verwenden Sie HTML5 < nav>-Tag

So schreiben Sie eine HTML-Dokumenttypdeklaration

Das obige ist der detaillierte Inhalt vonSo verwenden Sie das Padding-Attribut in CSS. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!