Comment définir le remplissage en CSS-tutoriel CSS-php.cn

Comment définir le remplissage en CSS

醉折花枝作酒筹

Libérer： 2023-01-05 16:10:28

original

5964 Les gens l'ont consulté

En CSS, vous pouvez utiliser l'attribut padding pour définir la marge intérieure. Il vous suffit de définir "padding : valeur + unité | valeur en pourcentage" pour l'élément. La propriété padding définit la largeur de tout le remplissage sur un élément ou définit la largeur du remplissage de chaque côté. L'attribut padding ne permet pas de spécifier des valeurs de marge négatives.

Comment définir le remplissage en CSS

L'environnement d'exploitation de ce tutoriel : système Windows 7, version CSS3&&HTML5, ordinateur Dell G3.

Voyons comment définir le padding (padding) :

Notre padding est l'un des modèles de boîte CSS, alors jetons maintenant un œil au padding. Comment est-il configuré ?

padding : est un attribut raccourci qui peut définir tous les attributs de remplissage dans une déclaration.

Utilisez l'attribut padding seul pour modifier le remplissage supérieur, inférieur, gauche et droit.

Valeurs possibles :

length : Définir un remplissage fixe (pixels, pt, em, etc.)

% : Définir un remplissage en utilisant une valeur en pourcentage

Utilisation :

padding-left Définit l'espacement de remplissage à partir du côté gauche de l'objet

div{padding-left:5px}

Copier après la connexion

L'espacement de remplissage à partir du côté gauche à l'intérieur de l'objet est de 5px

padding-right définit l'espacement de remplissage sur le côté droit de l'objet

div{padding-right:5px}

Copier après la connexion

l'espacement de remplissage sur le côté droit de l'objet est de 5px

padding-top définit la distance sur l'objet. L'intervalle de remplissage de la marge supérieure

div{padding-top:5px}

Copier après la connexion

La distance entre le remplissage supérieur à l'intérieur de l'objet et la distance de remplissage supérieure est de 5px

padding-bottom Définit la distance entre l'objet et le remplissage de la marge inférieure

div{padding-bottom:5px}

Copier après la connexion

La distance à l'intérieur de l'objet et l'espacement du remplissage en bas est de 5px

Description

Récupérez ou définissez les marges du patch sur les quatre côtés de l'objet.

Si les quatre valeurs de paramètres sont fournies, les quatre côtés seront appliqués dans l'ordre haut-droite-bas-gauche.

Si un seul est fourni, il sera utilisé pour les quatre bords.

Si deux sont fournis, le premier est pour le haut-bas et le second est pour la gauche-droite.

Si trois sont fournis, le premier est pour le haut, le deuxième est pour la gauche-droite et le troisième est pour le bas.

Pour utiliser cet attribut sur un objet en ligne, vous devez d'abord définir l'attribut height ou width de l'objet, ou définir l'attribut position sur absolu.

La valeur de Padding ne peut pas être négative.

Exemple :

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <style>
            .css{ 
                width:350px; 
                height:80px; 
                border:1px solid #00F; 
                padding-left:40px;
                padding-right:40px;
                padding-top:40px;
                padding-bottom:40px;
                /* 可以合起来写成padding:40px; */
                } 
    </style> 
    </head>

    <body>
        <div class="css">padding用法</div>
    </body>
</html>

Copier après la connexion

Rendu :

Comment définir le remplissage en CSS