ZONE CSS
Information accessibilité
Feuille de style css : padding
Définition de padding
La propriété css padding permet de spécifier la marge qui sépare un élément de chacune de ses bordures (marges intérieures).
padding : 5px;
}
.identifiant{
padding : 15px 15px;
}
La propriétépadding css peut pendre des valeurs :
- numérique suivie de px ou % ou pt ou em.
Si la propriété padding css est suivie d'une seule valeur alors cette valeur est appliquée à toutes les marges intérieures (top, bottom, left, right).
Si la propriété css padding est suivie de deux valeurs alors la première valeur est appliquée aux marges intérieures horizontales et la seconde aux marges intérieures verticales.
Si la propriété padding css est suivie de quatre valeurs elles correspondent dans l'ordre à la marge intérieure : padding-top, padding-right, padding-bottom, padding-left.
Exemple de code :
.identifiant{ padding : 5px;
}
.identifiant{
padding : 15px 15px;
}
- numérique suivie de px ou % ou pt ou em.
Si la propriété padding css est suivie d'une seule valeur alors cette valeur est appliquée à toutes les marges intérieures (top, bottom, left, right).
Si la propriété css padding est suivie de deux valeurs alors la première valeur est appliquée aux marges intérieures horizontales et la seconde aux marges intérieures verticales.
Si la propriété padding css est suivie de quatre valeurs elles correspondent dans l'ordre à la marge intérieure : padding-top, padding-right, padding-bottom, padding-left.
Application de padding
La propriété padding css est applicable sur toutes les balises HTML ou XHTML.
La propriété css padding en HTML ou XHTML peut remplacer l'attribut CELLPADDING de la balise HTML ou XHTML TABLE
Problèmes de padding
La propriété padding css pose un problème d'interprétation qui redimensionne la taille du bloc.
Voir l'explication du bug plus bas.
Exemples / Astuces
Bug d'interprétation des marges intérieures
Internet explorer 5.+ et 6.+ ont leur propre manière de d'interpréter les PADDING suivant la DTD (DocType) spécifiée dans la page.
Si la DTD est <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> comme c'est le cas pour ce site alors la taille que vous avez spécifié pour le bloc ne bougera pas. C'est spécifique Internet Explorer.
Si la DTD est <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> ou Transitional idem pour le XHTML1.0 (sauf si<?xml version="1.0"?>) alors Internet Explorer va interpréter le padding suivant le standard :
la longueur de votre bloc sera de :
W+Pd+PG
W=la taille que vous avez spécifié,
Pd=padding droite,
Pg=padding gauche.
Votre bloc sera donc plus grand.
Cela sera de même pour la hauteur.
C'est ce cas, qui est interprété par les autres navigateurs
Si la DTD est <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> comme c'est le cas pour ce site alors la taille que vous avez spécifié pour le bloc ne bougera pas. C'est spécifique Internet Explorer.
Si la DTD est <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> ou Transitional idem pour le XHTML1.0 (sauf si<?xml version="1.0"?>) alors Internet Explorer va interpréter le padding suivant le standard :
la longueur de votre bloc sera de :
W+Pd+PG
W=la taille que vous avez spécifié,
Pd=padding droite,
Pg=padding gauche.
Votre bloc sera donc plus grand.
Cela sera de même pour la hauteur.
C'est ce cas, qui est interprété par les autres navigateurs
Exemples / Astuces
Les marges ul ou ol suivant les navigateurs
Les marges gauches d'un ul ou ol sont gérés différement suivant les navigateurs.
Firefox, Mozilla, Netscape utilisent pour faire une marge droite padding-left.
Exemple avec un padding-left:0
Internet Explorer et Opéra utilisent pour faire une marge droite margin-left.
Exemple avec un margin-left:0
Pour que cela fonctionne sur toutes les navigateurs :
//ou
ul {margin-left: 0; padding-left: 10px;}
Firefox, Mozilla, Netscape utilisent pour faire une marge droite padding-left.
Exemple avec un padding-left:0
Internet Explorer et Opéra utilisent pour faire une marge droite margin-left.
Exemple avec un margin-left:0
Pour que cela fonctionne sur toutes les navigateurs :
Exemple de code :
ul {margin-left: 10px; padding-left: 0;} //ou
ul {margin-left: 0; padding-left: 10px;}
BUG INTERNAUTE
Explication
Vous trouverez ci-dessous divers bugs d'interprétation de la css padding.
Ces bugs ont été transmis par les internautes du site.
J'ai vérifié certains bugs mais pour la plupart, ils sont soit sur MAC soit sur un navigateur que je ne possède pas.
Ceux que j'ai pu visualiser sont notés
Bug vérifié : oui.
Ces bugs ont été transmis par les internautes du site.
J'ai vérifié certains bugs mais pour la plupart, ils sont soit sur MAC soit sur un navigateur que je ne possède pas.
Ceux que j'ai pu visualiser sont notés
Bug vérifié : oui.
Menu secondaire général de la zone CSS.
