Introduction aux propriétés de remplissage en CSS [explication détaillée des exemples]-tutoriel CSS-php.cn

Introduction aux propriétés de remplissage en CSS [explication détaillée des exemples]

藏色散人

Libérer： 2018-08-31 11:17:44

original

3415 Les gens l'ont consulté

Lorsque nous mettons en page la page frontale, le rôle des attributs de marge intérieure et extérieure CSS est extrêmement important. Ce n'est qu'en utilisant pleinement les attributs de marge intérieure et extérieure CSS, c'est-à-dire les attributs de remplissage CSS et de style de marge, que nous pouvons. concevoir une belle page d’accueil. Donc dans mon article précédent [Quels sont les attributs de marge CSS ? Quelles sont leurs utilisations ? ] vous a donné une introduction détaillée à l'utilisation spécifique de l'attribut CSS margin. Cet article continuera à vous présenter l'utilisation spécifique de l'attribut de remplissage CSS !

Ci-dessous, nous l'expliquerons un par un à travers des exemples de code spécifiques.

Voici un morceau de attribut de remplissage CSS exemple de code est le suivant :

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>csspadding属性使用示例</title>
    <style>
div{
    width: 400px;
    height: 80px;
    border:2px solid red;
    margin-top: 10px;
}
        .p1{padding: 10px;}
        .p2{padding: 20px 30px;}
        .p3{padding:10px 5px 15px 20px;}
     </style>
</head>
<body>
<div class="p1">
    <p>css padding内边距属性示例1-给此段文字添加了padding:10px;的样式。</p>
</div>
<div class="p2">
    <p>css padding内边距属性示例2-给此段文字添加了padding:20px 30px;的样式。</p>
</div>
<div class="p3">
    <p>css padding内边距属性示例3-给此段文字添加了padding:10px 5px 15px 20px;的样式。</p>
</div>
</body>
</html>

Copier après la connexion

L'effet du code ci-dessus est le suivant :

Introduction aux propriétés de remplissage en CSS [explication détaillée des exemples]

Tout d'abord, il faut savoir que le padding représente l'espace entre l'élément et sa bordure. Regardons ensuite l'image ci-dessus. Nous définissons l'attribut de style padding 10px pour le texte dans le bloc div p1, ce qui augmente la distance entre ce texte et les bordures rouges sur les quatre côtés de 10 pixels. Ensuite, nous avons ajouté les attributs padding: 20 30px; style à p2, ce qui signifie que les marges supérieure et inférieure du champ de texte sont de 20 px ; les marges gauche et droite sont de 30 px

Continuons à regarder le remplissage : 10px 5px 15px ajouté dans p3 L'attribut de style de 20px indique ici que le remplissage supérieur de ce texte est de 10px, le remplissage droit est de 5px, le remplissage inférieur est de 15px et le remplissage gauche est de 20px.

Les paramètres de remplissage supérieur, inférieur, gauche et droit ici peuvent également être écrits séparément, tels que padding-top, padding-left, padding-bottom et padding-right.

Remarque : le remplissage de la marge intérieure de style CSS ne peut pas être défini sur des valeurs négatives !

Ce qui précède est une introduction à l'utilisation spécifique de l'attribut padding en css ! J'espère que cela aidera ceux qui en ont besoin !

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!