Comment utiliser l'attribut padding en 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. Résumé du cas

le remplissage est utilisé pour définir le style de l'espacement entre la bordure à quatre côtés et la zone de contenu à l'intérieur de l'objet, afin d'obtenir un espacement dans l'objet. peut utiliser CSS div + remplissage.

3. Abréviation de rembourrage et cas

1. Les quatre côtés ont la même abréviation de rembourrage

Si les paramètres de rembourrage sur les quatre. les côtés sont les mêmes, par exemple 5px, expression originale :

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

peut être abrégé en CSS comme suit :

padding:5px;

2 Abréviations pour différents remplissages sur les quatre côtés

Tout comme les différentes valeurs de remplissage sur les quatre côtés. dans notre deuxième tutoriel, padding-left:20px;padding-right:30px;padding-top:40px;padding-bottom:50px

Nous pouvons l'abréger comme suit :

Padding:40px 30px 50px 20px;

Notez que chaque valeur est séparée par un espace

Expliquez les significations respectives

Les premiers 40px représentent "top" padding-top:40px;

Le deuxième 30px représente "droit" padding-right:30px;

Le troisième 50px représente le "bas" padding-bottom:50px;

Le quatrième 20px représente la "gauche" padding-left:20px;

3. Les côtés gauche et droit sont les mêmes, haut et bas Abréviation de remplissage avec des valeurs différentes

Si le remplissage est de 10 px à gauche et à droite, 20px en haut et 30px en bas

Écriture générale :

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

L'abréviation peut être :

Padding:20px 10px 30px;

Les premiers 20px représentent le rembourrage supérieur 20px,

Le second 10px représente le rembourrage. -left et padding-right, qui font 10px

Le troisième 30px représente padding-bottom : 30px

Trois côtés Idem, un côté a une valeur différente

Nous pouvons. abrégez toujours trois côtés avec la même valeur et l'autre côté avec des valeurs différentes.

EXP

Si le remplissage est de 10px en haut et à gauche et de 20px en bas, le style CSS s'écrit généralement comme ceci :

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

est abrégé en :

padding:10px;padding-bottom:20px

Notez que l'ordre ne peut pas être inversé. L'astuce ici est de parcourir Le lecteur lit de haut en bas et de gauche à droite, nous pouvons donc d'abord définir les quatre côtés pour qu'ils soient identiques, puis ajouter une valeur de style différente de l'autre côté.

Lecture approfondie :

1. Optimisation de la compression HTML

2. Optimisation de la compression CSS

3. Espacement des mots

padding css summary

Le style de remplissage est un attribut de style CSS que nous utilisons plus fréquemment. Généralement, nous utilisons le remplissage pour définir les intervalles de marge supérieure, inférieure, gauche et droite dans un. objet Bien sûr, si nous rencontrons l'indentation du texte de début, nous pouvons utiliser le style css

text-indent

. Lorsque vous utilisez le remplissage, faites attention à l'augmentation ou à la diminution de la largeur. Si la largeur totale est de 500 px et qu'un style de remplissage de 10 px est défini à gauche et à droite, la largeur de la zone de contenu sera. devient 480px. En même temps, faites attention à la signification de l'abréviation PADDING lorsque vous utilisez le style. Essayez d'utiliser des abréviations CSS comme

Il existe de nombreuses façons d'utiliser le remplissage. Pour un contenu plus excitant, veuillez faire attention aux autres. articles connexes sur le site php chinois !

Lecture connexe :

Comment définir la hauteur et l'espacement des lignes du paragraphe p en HTML

Comment utiliser le HTML5 < nav> tag

Comment rédiger une déclaration de type de document HTML

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!