Heim > Artikel > Web-Frontend > 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代码
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-indentverwenden. 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 festSo verwenden Sie HTML5 < nav>-TagSo schreiben Sie eine HTML-DokumenttypdeklarationDas 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!