padding

Hérité : non - Compatibilité :

- IE 4,5,6,7 - CSS 1

Classement alphabétique :

!important
-moz-border-radius...
-moz-border-radius
-moz-opacity
azimuth
background-attachment
background-color
background-image
background-position...
background-position
background-repeat
background
behavior
border-bottom-color
border-bottom-style
border-bottom-width
border-bottom
border-collapse
border-color
border-spacing
border-style
border-width
border
bottom
caption-side
clear
clip
color
content
counter-increment
cue-after
cue
cursor
direction
display
elevation
empty-cells
filter (new style)
filter (old style)
float
font-family
font-size-adjust
font-size
font-stretch
font-style
font-variant
font-weight
font
height
ime-mode
layer-background-color
layout-flow
layout-grid-char
layout-grid-line
layout-grid-mode
layout-grid-type
layout-grid
left
letter-spacing
line-break
line-height
list-style-image
list-style-position
list-style-type
list-style
margin-bottom
margin
marker-offset
marks
max-height
max-width
opacity
orphans
outline-color
outline-style
outline-width
outline
overflow-x
overflow
padding-bottom
padding
page-break-after
page-break-inside
page
pause-after
pause
pitch-range
pitch
play-during
position
quotes
richness
right
ruby-align
ruby-overhang
ruby-position
scrollbar-3dlight-color
size
speak-header
speak-numeral
speak-punctuation
speak
speech-rate
stress
table-layout
text-align-last
text-align
text-autospace
text-decoration
text-indent
text-justify
text-kashida-space
text-overflow
text-shadow
text-transform
text-underline-position
top
unicode-bidi
vertical-align
visibility
voice-family
volume
white-space
widows
width
word-break
word-spacing
word-wrap
writing-mode
z-index
zoom

Cette forme courte de propriété permet de définir, à l'aide d'une seule instruction, les largeurs de remplissage des bords (jusqu'à quatre) d'un élément.

Le remplissage est l'espace vide qui entoure la zone de contenu d'un élément; cet espace s'étend jusqu'aux bordures de l'élément, s'il en existe, mais n'inclut pas ces dernières. Le remplissage reprend la couleur ou l'image d'arrière-plan de l'élément.

Lorsque vous insérez du remplissage dans un élément, vous augmentez la taille de son rectangle visible sans modifier pour autant la taille du bloc de contenu.

Vous pouvez spécifier entre une et quatre valeurs de remplissage, séparées par des espaces. Le nombre de valeurs spécifiées détermine à quels côtés doivent s'appliquer ces valeurs.

Syntaxe CSS

padding: valeur(s) {1,4}

Valeur(s) possible(s) pour cette propriété :

Cette propriété accepte une, deux, trois ou quatre valeurs, selon le nombre et le type de côtés auxquels vous souhaitez appliquer le remplissage. La propriété paddingThickness peut avoir pour valeur une longueur ou un pourcentage de la taille de l'élément parent immédiat. Les valeurs spécifiées sont interprétées de la façon suivante.

Nombre de valeurs	Effet
1	La valeur de remplissage spécifiée est appliquée aux quatre côtés
2	La première valeur spécifiée est appliquée aux côtés supérieur et inférieur, et la seconde valeur aux côtés droit et gauche
3	La première valeur spécifiée est appliquée au côté supérieur, la seconde aux côtés droit et gauche, et la troisième au côté inférieur
4	Chaque valeur spécifiée est appliquée, respectivement, au côté supérieur, droit, inférieur et gauche

Valeur initiale

0; IE pour Windows spécifie une valeur par défaut de 1 pour les éléments td et th.

Exemple

p.highlight {padding: 10px 20px}

S'applique à

Tous les éléments.

Eléments body, caption, div, iframe, marquee, table, td, textarea, tr pour IE 5 et ses versions antérieures pour Windows.

Javascript

[window.]document .getElementById("elementID") .style .padding

bottom
clear
clip
display
float
height
left
margin
margin-bottom
margin-left
margin-right
margin-top
max-height
min-height
max-width
min-width
padding
padding-bottom
padding-left
padding-right
padding-top
position
right
text-align -top
vertical-align
width
z-index

Ce site vous a plu ? Visitez aussi : et

Cette page est inspirée d'un texte anglophone extrait du livre HTML - Definitive Reference.
L'adaptation de ce texte a été réalisée par css-faciles.
Son contenu peut être recopié sous la condition express de faire figurer la présente mention
(y compris les 2 liens ci-dessus) dans le contenu copié.

Pour plus de détail sur ce copyright,
consultez notre page consacrée aux droits de copie.