Maison  >  Article  >  interface Web  >  Comment définir le remplissage en CSS

Comment définir le remplissage en CSS

醉折花枝作酒筹
醉折花枝作酒筹original
2021-04-21 17:27:516000parcourir

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}

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}

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}

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}

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>

Rendu :

Comment définir le remplissage en CSS

Apprentissage recommandé : Tutoriel vidéo CSS

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!

Déclaration:
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn