L'attribut padding en CSS peut-il avoir une valeur négative ? Explication détaillée de l'attribut padding en CSS-tutoriel CSS-php.cn

L'attribut padding en CSS peut-il avoir une valeur négative ? Explication détaillée de l'attribut padding en CSS

寻∝梦

Libérer： 2019-05-22 09:20:20

original

19513 Les gens l'ont consulté

Introduction détaillée à l'attribut padding padding dans le modèle de boîte CSS, et une erreur courante commise par les novices. L'attribut padding peut vraiment écrire des valeurs négatives. La réponse se trouve à la fin de l'article. Regardons cet article maintenant

L'attribut padding en CSS peut-il avoir une valeur négative ? Explication détaillée de l'attribut padding en CSS

Tout d'abord, nous introduisons la première question :

css soit négatif ? La réponse est simple. Nous ne la présenterons pas en premier. Il y a une explication sur l’utilisation des valeurs négatives de l’attribut padding à la fin de l’article.

Regardons maintenant l'utilisation de l'attribut padding en CSS :

padding : attribut raccourci qui définit tous les attributs de remplissage (auto/longueur longueur valeur/ %)

padding-top : définit le rembourrage supérieur
padding-right : définit le bon rembourrage
padding-bottom : définit le remplissage inférieur
padding-left : définit le remplissage gauche

Ceci est une introduction au remplissage. Regardons un exemple pour en savoir plus :

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>PHP中文网</title>
<style type="text/css">
table{padding-top:20px;padding-right:50px;padding-bottom:100px;padding-left:20px;border:double;}
</style>
</head>
<body>
<table width="200px"; height="150px">
<tr><td>123</td><td>456</td></tr>
<tr><td>789</td><td>987</td></tr>
</table>
</body>
</html>

Copier après la connexion

Le code ci-dessus Après avoir écrit les quatre attributs, bien que ce soit très compliqué, nous avons toujours pour voir comment le code s'affiche dans le navigateur :

Lattribut padding en CSS peut-il avoir une valeur négative ? Explication détaillée de lattribut padding en CSS

(Vous voulez voir plus de CSS Il est recommandé d'étudier le style dans la colonne

manuel css de le site PHP chinois)

L'effet est-il très évident Jetons un coup d'œil à l'explication du code :

padding-top:20px : Définissez le remplissage supérieur à 20. pixels.
padding-right:50px : définit le remplissage à droite comme étant de 50 pixels.
padding-bottom:100px : Définit le remplissage inférieur à 100 pixels.
padding-left:20px : définit le remplissage gauche à 20 pixels, qu'il ait la même largeur que le haut.
border:double : définit la ligne de bordure comme une double ligne continue.

Cela dit, regardons ce qui se passera si nous écrivons une valeur négative ?

<style type="text/css">
table{padding-top:20px;padding-right:50px;padding-bottom:-300px;padding-left:20px;border:double;}
</style>

Copier après la connexion

Soyons un peu exagéré et donnons une valeur de moins 300. Voyons l'effet :

Lattribut padding en CSS peut-il avoir une valeur négative ? Explication détaillée de lattribut padding en CSS

Après test , j'ai trouvé que l'effet était quasiment inexistant, c'était exactement la même chose que d'annuler l'attribut padding-bottom.

On peut voir à partir de cela que le remplissage en CSS ne peut pas avoir de valeurs négatives. Si c'est le cas, cela équivaut à annuler cet attribut.

D'accord, ce qui précède est un article sur l'utilisation du padding dans le style CSS. Si vous souhaitez en savoir plus, rendez-vous dans la colonne

manuel d'apprentissage CSS du site Web PHP chinois. pour en savoir plus. Les étudiants qui ont des questions peuvent les poser ci-dessous.

[Recommandation de l'éditeur]

Comment faire en sorte que HTML une balise change de couleur au survol de la souris, CSS contrôle une explication détaillée du style de survol de la balise

Comment ajouter un style de bordure à un tableau CSS ? Résumé des styles de bordure de tableau CSS (avec exemples complets)

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!

Php8, je viens aussi

Apprenez la mise en page d'un site Web en 30 minutes

Tutoriel vidéo Shangguan Oracle débutant à compétent

Votre première ligne de code UNI-APP

Flutter de zéro au lancement de l'application

Brother Lian Nouveau didacticiel vidéo Linux

Tutoriel vidéo AXURE 9 (convient à l'interface utilisateur interactive de conception de produits du chef de produit)

Tutoriel vidéo PS Zero Basic Proficiency

Tutoriel vidéo de 16 jours sur l'interface utilisateur pour vous aider à démarrer

Tutoriel vidéo sur les techniques PS et les techniques de découpage

Tutoriel vidéo sur la construction et le lancement de projets d'Alibaba Cloud Environment

Présentation des réseaux informatiques - Connaissances de base que les programmeurs doivent maîtriser

Tutoriel essentiel pour les programmeurs - Explication du protocole HTTP

Tutoriel vidéo Websocket

L'attribut padding en CSS peut-il avoir une valeur négative ? Explication détaillée de l'attribut padding en CSS