II-A-1. Largeur | width▲
width : permet de définir la largeur d'un élément. La valeur peut être en px, %, ou encore auto, la valeur par défaut. Cette propriété ne tient pas compte des marges, espacements et bordures.
Syntaxe : <length> | <percentage> | auto | inherit
Compatibilité : IE 5+, FF 1.0+, Chrome 0.2+, Safari 1.0+, Opera 6+
Note : la valeur inherit n'est pas supportée par IE 7 et précédents. IE 8 requiert un doctype. IE 9 supporte inherit.
Version CSS : 1
Lorem ipsum dolore sit amet, consectetur adipisicing elit.
Voir la source
Sélectionnez <style
type="text/
css">
.width
{
width
:
200px
;
border
:
2px
solid
#
696969
;
background-color
:
#
93caff
;
}
</style>
<
div
class=
"
width
"
>
Lorem ipsum dolore sit amet, consectetur adipisicing elit.<
/
div>
II-A-2. Hauteur | height▲
height : idem que pour la largeur mais pour la hauteur. Cette propriété ne tient pas compte des marges, espacements et bordures.
Syntaxe : <length> | <percentage> | auto | inherit
Compatibilité : IE 5+, FF 1.0+, Chrome 0.2+, Safari 1.0+, Opera 6+
Note : la valeur inherit n'est pas supportée par IE 7 et précédents. IE 8 requiert un doctype. IE 9 supporte inherit.
Version CSS : 1
Lorem ipsum dolore sit amet, consectetur adipisicing elit.
Voir la source
Sélectionnez <style
type="text/
css">
.height
{
width
:
200px
;
height
:
50px
;
border
:
2px
solid
#
696969
;
background-color
:
#
93caff
;
}
</style>
<
div
class=
"
height
"
>
Lorem ipsum dolore sit amet, consectetur adipisicing elit.<
/
div>
II-A-3. Largeur minimale | min-width▲
min-width : permet de définir la largeur minimale sur un élément de type bloc. Cette propriété ne tient pas compte des marges, espacements et bordures.
Syntaxe : <length> | <percentage> | inherit
Compatibilité : IE 7+, FF 1.0+, Chrome 0.2+, Safari 1.0+, Opera 6+
Note : la valeur inherit n'est supportée par IE 8 que si un doctype est déclaré. IE 9 supporte inherit.
Version CSS : 2.1
Lorem ipsum dolore sit amet, consectetur adipisicing elit.
Voir la source
Sélectionnez <style
type="text/
css">
.min-w {
min-width
:
500px
;
width
:
10%
;
border
:
2px
solid
#
696969
;
background-color
:
#
93caff
;
}
</style>
<
p
class=
"
min-w
"
>
Lorem ipsum dolore sit amet, consectetur adipisicing elit.<
/
p>
II-A-4. Largeur maximale | max-width▲
max-width : permet de fixer la largeur maximale d'un élément de type bloc. Cette propriété ne tient pas compte des marges, espacements et bordures.
Syntaxe : <length> | <percentage> | none | inherit
Compatibilité : IE 7+, FF 1.0+, Chrome 0.2+, Safari 1.0+, Opera 6+
Note : la valeur inherit n'est supportée par IE 8 que si un doctype est déclaré. IE 9 supporte inherit.
Version CSS : 2.1
Lorem ipsum dolore sit amet, consectetur adipisicing elit.
Voir la source
Sélectionnez <style
type="text/
css">
.max-w {
max-width
:
50px
;
border
:
2px
solid
#
696969
;
background-color
:
#
93caff
;
}
</style>
<
p
class=
"
max-w
"
>
Lorem ipsum dolore sit amet, consectetur adipisicing elit.<
/
p>
II-A-5. Hauteur minimale | min-height▲
min-height : permet de fixer la hauteur minimale d'un élément de type bloc. Cette propriété ne tient pas compte des marges, espacements et bordures.
Syntaxe : <length> | <percentage> | inherit
Compatibilité : IE 7+, FF 1.0+, Chrome 0.2+, Safari 1.0+, Opera 6+
Note : la valeur inherit n'est supportée par IE 8 que si un doctype est déclaré. IE 9 supporte inherit.
Version CSS : 2.1
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
Voir la source
Sélectionnez <style
type="text/
css">
.min-h {
min-height
:
200px
;
width
:
50%
;
border
:
2px
solid
#
696969
;
background-color
:
#
93caff
;
}
</style>
<
p
class=
"
min-h
"
>
Lorem ipsum dolor sit amet, consectetur adipisicing elit.<
/
p>
II-A-6. Hauteur maximale | max-height▲
max-height : permet de fixer la hauteur maximale d'un élément de type bloc. Cette propriété ne tient pas compte des marges, espacements et bordures.
Syntaxe : <length> | <percentage> | none | inherit
Compatibilité : IE 7+, FF 1.0+, Chrome 0.2+, Safari 1.0+, Opera 6+
Note : la valeur inherit n'est supportée par IE 8 que si un doctype est déclaré. IE 9 supporte inherit.
Version CSS : 2.1
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore
et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi
ut aliquip ex ea commodo consequat
Voir la source
Sélectionnez <style
type="text/
css">
.max-h {
max-height
:
20px
;
width
:
50%
;
border
:
2px
solid
#
696969
;
background-color
:
#
93caff
;
margin-bottom
:
50px
;
}
</style>
<
p
class=
"
max-h
"
>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore
et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi
ut aliquip ex ea commodo consequat<
/
p>
II-B-1. Marge externe en haut | margin-top▲
margin-top : permet de définir la marge externe en haut d'un élément. Plusieurs unités sont possibles pour cette propriété (px, %, em). Les valeurs négatives sont autorisées.
Syntaxe : <margin-width> | inherit
Compatibilité : IE 5+, FF 1.0+, Chrome 0.2+, Safari 1.0+, Opera 6+
Note : la valeur inherit n'est pas supportée par IE 7 et précédents. IE 8 requiert un doctype. IE 9 supporte inherit.
Version CSS : 2.1
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore
et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi
ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit
esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident,
sunt in culpa qui officia deserunt mollit anim id est laborum.
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore
et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi
ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit
esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident,
sunt in culpa qui officia deserunt mollit anim id est laborum.
Voir la source
Sélectionnez <style
type="text/
css">
.m-top1 {
border
:
1px
solid
black
;
background-color
:
red
;
width
:
800px
;
}
.m-top2 {
background-color
:
yellow
;
}
.m-top3 {
margin-top
:
20px
; background-color
:
yellow
;
}
</style>
<
div
class=
"
m-top1
"
>
<
div
class=
"
m-top2
"
>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore
et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi
ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit
esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident,
sunt in culpa qui officia deserunt mollit anim id est laborum.<
/
div>
<
div
class=
"
m-top3
"
>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore
et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi
ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit
esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident,
sunt in culpa qui officia deserunt mollit anim id est laborum.<
/
div>
<
/
div>
II-B-2. Marge externe à gauche | margin-left▲
margin-left : permet de définir la marge externe à gauche d'un élément. Plusieurs unités sont possibles pour cette propriété (px, %, em). Les valeurs négatives sont autorisées.
Syntaxe : <margin-width> | inherit
Compatibilité : IE 5+, FF 1.0+, Chrome 0.2+, Safari 1.0+, Opera 6+
Note : la valeur inherit n'est pas supportée par IE 7 et précédents. IE 8 requiert un doctype. IE 9 supporte inherit.
Version CSS : 1
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore
et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi
ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit
esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident,
sunt in culpa qui officia deserunt mollit anim id est laborum.
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore
et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi
ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit
esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident,
sunt in culpa qui officia deserunt mollit anim id est laborum.
Voir la source
Sélectionnez <style
type="text/
css">
.m-left1 {
border
:
1px
solid
black
;
background-color
:
red
;
width
:
420px
;
}
.m-left2 {
width
:
200px
;
float
:
left
;
background-color
:
yellow
;
}
.m-left3 {
width
:
200px
;
float
:
left
;
margin-left
:
20px
;
background-color
:
yellow
;
}
</style>
<
div
class=
"
m-left1
"
>
<
div
class=
"
m-left2
"
>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore
et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi
ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit
esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident,
sunt in culpa qui officia deserunt mollit anim id est laborum.<
/
div>
<
div
class=
"
m-left3
"
>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore
et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi
ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit
esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident,
sunt in culpa qui officia deserunt mollit anim id est laborum.<
/
div>
<
div
class=
"
clear
"
>
<
/
div>
<
/
div>
II-B-3. Marge externe à droite | margin-right▲
margin-right : permet de définir la marge externe à droite d'un élément. Plusieurs unités sont possibles pour cette propriété (px, %, em). Les valeurs négatives sont autorisées.
Syntaxe : <margin-width> | inherit
Compatibilité : IE 5+, FF 1.0+, Chrome 0.2+, Safari 1.0+, Opera 6+
Note : la valeur inherit n'est pas supportée par IE 7 et précédents. IE 8 requiert un doctype. IE 9 supporte inherit.
Version CSS : 1
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore
et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi
ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit
esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident,
sunt in culpa qui officia deserunt mollit anim id est laborum.
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore
et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi
ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit
esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident,
sunt in culpa qui officia deserunt mollit anim id est laborum.
Voir la source
Sélectionnez <style
type="text/
css">
.m-right1 {
border
:
1px
solid
black
;
background-color
:
red
;
width
:
420px
;
}
.m-right2 {
width
:
200px
;
float
:
left
;
margin-right
:
20px
;
background-color
:
yellow
;
}
.m-right3 {
width
:
200px
;
float
:
left
;
background-color
:
yellow
;
}
</style>
<
div
class=
"
m-right1
"
>
<
div
class=
"
m-right2
"
>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore
et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi
ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit
esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident,
sunt in culpa qui officia deserunt mollit anim id est laborum.<
/
div>
<
div
class=
"
m-right3
"
>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore
et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi
ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit
esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident,
sunt in culpa qui officia deserunt mollit anim id est laborum.<
/
div>
<
div
class=
"
clear
"
>
<
/
div>
<
/
div>
II-B-4. Marge externe en bas | margin-bottom▲
margin-bottom : permet de définir la marge externe en bas d'un élément. Plusieurs unités sont possibles pour cette propriété (px, %, em). Les valeurs négatives sont autorisées.
Syntaxe : <margin-width> | inherit
Compatibilité : IE 5+, FF 1.0+, Chrome 0.2+, Safari 1.0+, Opera 6+
Note : la valeur inherit n'est pas supportée par IE 7 et précédents. IE 8 requiert un doctype. IE 9 supporte inherit.
Version CSS : 1
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore
et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi
ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit
esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident,
sunt in culpa qui officia deserunt mollit anim id est laborum.
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Voir la source
Sélectionnez <style
type="text/
css">
.m-bottom1 {
border
:
1px
solid
black
;
background-color
:
red
;
width
:
800px
;
}
.m-bottom2 {
margin-bottom
:
20px
;
background-color
:
yellow
;
}
.m-bottom3 {
background-color
:
yellow
;
}
</style>
<
div
class=
"
m-bottom1
"
>
<
div
class=
"
m-bottom2
"
>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore
et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi
ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit
esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident,
sunt in culpa qui officia deserunt mollit anim id est laborum.<
/
div>
<
div
class=
"
m-bottom3
"
>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.<
/
div>
<
/
div>
II-B-5. Marge externe | margin▲
margin : permet de définir en une seule fois les marges externes de tous les côtés d'un élément. Les valeurs négatives sont autorisées.
Syntaxe : <margin-width>{1,4} | inherit
Compatibilité : IE 5+, FF 1.0+, Chrome 0.2+, Safari 1.0+, Opera 6+
Note : la valeur inherit n'est pas supportée par IE 7 et précédents. IE 8 requiert un doctype. IE 9 supporte inherit.
Version CSS : 1
Indiquez de une à quatre valeurs à la suite. Selon le nombre de valeurs que vous mettez, la signification change :
- une valeur : ce sera la marge pour le haut, le bas, la gauche et la droite ;
- deux valeurs : la première correspond à la marge pour le haut et le bas, la seconde pour la gauche et la droite ;
- trois valeurs : la première correspond à la marge du haut, la seconde aux marges à gauche et à droite, la troisième à la marge du bas ;
- quatre valeurs : respectivement la marge du haut, de la droite, du bas, de la gauche.
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore
et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi
ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit
esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident,
sunt in culpa qui officia deserunt mollit anim id est laborum.
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore
et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi
ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit
esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident,
sunt in culpa qui officia deserunt mollit anim id est laborum.
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore
et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi
ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit
esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident,
sunt in culpa qui officia deserunt mollit anim id est laborum.
Voir la source
Sélectionnez <style
type="text/
css">
.margin1 {
border
:
1px
solid
black
;
background-color
:
red
;
width
:
800px
;
}
.margin2 {
background-color
:
yellow
;
}
.margin3 {
margin
:
20px
5px
;
background-color
:
yellow
;
}
.margin4 {
background-color
:
yellow
;
}
</style>
<
div
class=
"
margin1
"
>
<
div
class=
"
margin2
"
>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore
et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi
ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit
esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident,
sunt in culpa qui officia deserunt mollit anim id est laborum.<
/
div>
<
div
class=
"
margin3
"
>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore
et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi
ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit
esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident,
sunt in culpa qui officia deserunt mollit anim id est laborum.<
/
div>
<
div
class=
"
margin4
"
>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore
et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi
ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit
esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident,
sunt in culpa qui officia deserunt mollit anim id est laborum.<
/
div>
<
/
div>
II-C-1. Espacement en haut | padding-top▲
padding-top : permet de définir l'espacement interne en haut d'un élément. Plusieurs unités sont possibles pour cette propriété (px, %, em). Les valeurs négatives sont autorisées.
Syntaxe : <padding-width> | inherit
Compatibilité : IE 5+, FF 1.0+, Chrome 0.2+, Safari 1.0+, Opera 6+
Note : la valeur inherit n'est pas supportée par IE 7 et précédents. IE 8 requiert un doctype. IE 9 supporte inherit.
Version CSS : 1
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore
et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi
ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit
esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident,
sunt in culpa qui officia deserunt mollit anim id est laborum.
Voir la source
Sélectionnez <style
type="text/
css">
.p-top1 {
background-color
:
red
;
width
:
800px
;
}
.p-top2 {
padding-top
:
20px
;
background-color
:
red
;
border
:
1px
solid
black
;
}
.p-top3 {
background-color
:
yellow
;
}
</style>
<
div
class=
"
p-top1
"
>
<
div
class=
"
p-top2
"
>
<
div
style=
"
p-top3
"
>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore
et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi
ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit
esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident,
sunt in culpa qui officia deserunt mollit anim id est laborum.<
/
div>
<
/
div>
<
/
div>
II-C-2. Espacement à gauche | padding-left▲
padding-left : permet de définir l'espacement interne à gauche d'un élément. Plusieurs unités sont possibles pour cette propriété (px, %, em). Les valeurs négatives sont autorisées.
Syntaxe : <padding-width> | inherit
Compatibilité : IE 5+, FF 1.0+, Chrome 0.2+, Safari 1.0+, Opera 6+
Note : la valeur inherit n'est pas supportée par IE 7 et précédents. IE 8 requiert un doctype. IE 9 supporte inherit.
Version CSS : 1
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore
et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi
ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit
esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident,
sunt in culpa qui officia deserunt mollit anim id est laborum.
Voir la source
Sélectionnez <style
type="text/
css">
.p-left1 {
background-color
:
red
;
width
:
800px
;
}
.p-left2 {
padding-left
:
20px
;
background-color
:
red
;
border
:
1px
solid
black
;
}
.p-left3 {
background-color
:
yellow
;
}
</style>
<
div
class=
"
p-left1
"
>
<
div
class=
"
p-left2
"
>
<
div
class=
"
p-left3
"
>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore
et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi
ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit
esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident,
sunt in culpa qui officia deserunt mollit anim id est laborum.<
/
div>
<
/
div>
<
/
div>
II-C-3. Espacement à droite | padding-right▲
padding-right : permet de définir l'espacement interne à droite d'un élément. Plusieurs unités sont possibles pour cette propriété (px, %, em). Les valeurs négatives sont autorisées.
Syntaxe : <padding-width> | inherit
Compatibilité : IE 5+, FF 1.0+, Chrome 0.2+, Safari 1.0+, Opera 6+
Note : la valeur inherit n'est pas supportée par IE 7 et précédents. IE 8 requiert un doctype. IE 9 supporte inherit.
Version CSS : 1
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore
et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi
ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit
esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident,
sunt in culpa qui officia deserunt mollit anim id est laborum.
Voir la source
Sélectionnez <style
type="text/
css">
.p-right1 {
background-color
:
red
;
width
:
800px
;
}
.p-right2 {
padding-right
:
20px
;
background-color
:
red
;
border
:
1px
solid
black
;
}
.p-right3 {
background-color
:
yellow
;
}
</style>
<
div
class=
"
p-right1
"
>
<
div
class=
"
p-right2
"
>
<
div
class=
"
p-right3
"
>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore
et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi
ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit
esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident,
sunt in culpa qui officia deserunt mollit anim id est laborum.<
/
div>
<
/
div>
<
/
div>
II-C-4. Espacement en bas | padding-bottom▲
padding-bottom : permet de définir l'espacement interne en bas d'un élément. Plusieurs unités sont possibles pour cette propriété (px, %, em). Les valeurs négatives sont autorisées.
Syntaxe : <padding-width> | inherit
Compatibilité : IE 5+, FF 1.0+, Chrome 0.2+, Safari 1.0+, Opera 6+
Note : la valeur inherit n'est pas supportée par IE 7 et précédents. IE 8 requiert un doctype. IE 9 supporte inherit.
Version CSS : 1
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore
et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi
ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit
esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident,
sunt in culpa qui officia deserunt mollit anim id est laborum.
Voir la source
Sélectionnez <style
type="text/
css">
.p-bottom1 {
background-color
:
red
;
width
:
800px
;
}
.p-bottom2 {
padding-bottom
:
20px
;
background-color
:
red
;
border
:
1px
solid
black
;
}
.p-bottom3 {
background-color
:
yellow
;
}
</style>
<
div
class=
"
p-bottom1
"
>
<
div
class=
"
p-bottom2
"
>
<
div
class=
"
p-bottom3
"
>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore
et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi
ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit
esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident,
sunt in culpa qui officia deserunt mollit anim id est laborum.<
/
div>
<
/
div>
<
/
div>
II-C-5. Espacement tout-en-un | padding▲
padding : permet de définir en une seule fois l'espacement interne de tous les côtés d'un élément. Les valeurs négatives sont autorisées.
Syntaxe : <padding-width>{1,4} | inherit
Compatibilité : IE 5+, FF 1.0+, Chrome 0.2+, Safari 1.0+, Opera 6+
Note : la valeur inherit n'est pas supportée par IE 7 et précédents. IE 8 requiert un doctype. IE 9 supporte inherit.
Version CSS : 1
Indiquez de une à quatre valeurs à la suite. Selon le nombre de valeurs que vous mettez, la signification change :
- une valeur : ce sera la marge pour le haut, le bas, la gauche et la droite ;
- deux valeurs : la première correspond à la marge pour le haut et le bas, la seconde pour la gauche et la droite ;
- trois valeurs : la première correspond à la marge du haut, la seconde aux marges à gauche et à droite, la troisième à la marge du bas ;
- quatre valeurs : respectivement la marge du haut, de la droite, du bas, de la gauche.
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore
et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi
ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit
esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident,
sunt in culpa qui officia deserunt mollit anim id est laborum.
Voir la source
Sélectionnez <style
type="text/
css">
.bottom1 {
border
:
1px
solid
black
;
background-color
:
red
;
width
:
800px
;
}
.bottom2 {
padding
:
20px
5px
10px
;
background-color
:
red
;
}
.bottom3 {
background-color
:
yellow
;
}
</style>
<
div
class=
"
bottom1
"
>
<
div
class=
"
bottom2
"
>
<
div
class=
"
bottom3
"
>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore
et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi
ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit
esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident,
sunt in culpa qui officia deserunt mollit anim id est laborum.<
/
div>
<
/
div>
<
/
div>
Pour les propriétés de cette partie suivies d'un astérisque (
border*), il est possible de définir plus précisément l'effet voulu en "combinant" les noms de propriétés.
Exemples :
II-D-1. Épaisseur de la bordure | border-width*▲
border-width : permet de définir l'épaisseur du trait.
Syntaxe : <border-width>{1,4} | inherit
Compatibilité : IE 5+, FF 1.0+, Chrome 0.2+, Safari 1.0+, Opera 6+
Note : la valeur inherit n'est pas supportée par IE 7 et précédents. IE 8 requiert un doctype. IE 9 supporte inherit.
Version CSS : 1
Indiquez de une à quatre valeurs à la suite. Selon le nombre de valeurs que vous mettez, la signification change :
- une valeur : bordure égale pour les quatre côtés ;
- deux valeurs : la première correspond à l'épaisseur pour le haut et le bas, la seconde pour la gauche et la droite ;
- trois valeurs : la première correspond à l'épaisseur du haut, la seconde pour la gauche et la droite, la troisième pour le bas ;
- quatre valeurs : respectivement l'épaisseur du haut, de la droite, du bas, de la gauche.
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore
et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi
ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit
esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident,
sunt in culpa qui officia deserunt mollit anim id est laborum.
Voir la source
Sélectionnez <style
type="text/
css">
.border-w {
border-width
:
5px
1px
3px
0
;
border-color
:
black
;
border-style
:
solid
;
background-color
:
#
93caff
;
}
</style>
<
p
class=
"
border-w
"
>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore
et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi
ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit
esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident,
sunt in culpa qui officia deserunt mollit anim id est laborum.<
/
p>
II-D-2. Couleur de la bordure | border-color*▲
border-color : permet de définir la couleur de la bordure.
Syntaxe : [ <color> | transparent ]{1,4} | inherit
Compatibilité : IE 5+, FF 1.0+, Chrome 0.2+, Safari 1.0+, Opera 6+
Notes : la valeur inherit n'est pas supportée par IE 7 et précédents. IE 8 requiert un doctype. IE 9 supporte inherit. Internet Explorer 6 et précédents ne supportent pas la valeur transparent.
Version CSS : 1
Indiquez de une à quatre valeurs à la suite. Selon le nombre de valeurs que vous mettez, la signification change :
- une valeur : couleur unique pour les quatre côtés ;
- deux valeurs : la première correspond à la couleur pour le haut et le bas, la seconde pour la gauche et la droite ;
- trois valeurs : la première correspond à la couleur du haut, la seconde pour la gauche et la droite, la troisième pour le bas ;
- quatre valeurs : respectivement la couleur du haut, de la droite, du bas, de la gauche.
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore
et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi
ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit
esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident,
sunt in culpa qui officia deserunt mollit anim id est laborum.
Voir la source
Sélectionnez <style
type="text/
css">
.border-color
{
border-width
:
5px
2px
3px
4px
;
border-color
:
black
red
blue
green
;
border-style
:
solid
;
background-color
:
#
93caff
;
}
</style>
<
p
class=
"
border-color
"
>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore
et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi
ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit
esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident,
sunt in culpa qui officia deserunt mollit anim id est laborum.<
/
p>
II-D-3. Type de bordure | border-style*▲
border-style : permet de définir le style de bordure.
Syntaxe : <border-style>{1,4} | inherit
Compatibilité : IE 5.5+, FF 1.0+, Chrome 0.2+, Safari 1.0+, Opera 6+
Note : les valeurs inherit et hidden ne sont pas supportées par IE 8 et précédents.
Version CSS : 1
- none : pas de bordure ;
- hidden : bordure cachée, l'espace de bordure est apparent contrairement à none ;
- solid : ligne pleine ;
- double : ligne double : nécessite une taille de bordure de 3 pixels minimum) ;
- dashed : tirets ;
- dotted : pointillés ;
- inset : effet 3D "enfoncé" (dépend de la couleur de la bordure) ;
- outset : effet 3D "surélevé" (dépend de la couleur de la bordure) ;
- ridge : effet 3D double bordure (dépend de la couleur de la bordure) ;
- groove : autre effet 3D double bordure (dépend de la couleur de la bordure).
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore
et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi
ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit
esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident,
sunt in culpa qui officia deserunt mollit anim id est laborum
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore
et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi
ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit
esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident,
sunt in culpa qui officia deserunt mollit anim id est laborum
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore
et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi
ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit
esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident,
sunt in culpa qui officia deserunt mollit anim id est laborum
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore
et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi
ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit
esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident,
sunt in culpa qui officia deserunt mollit anim id est laborum
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore
et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi
ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit
esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident,
sunt in culpa qui officia deserunt mollit anim id est laborum
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore
et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi
ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit
esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident,
sunt in culpa qui officia deserunt mollit anim id est laborum
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore
et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi
ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit
esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident,
sunt in culpa qui officia deserunt mollit anim id est laborum
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore
et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi
ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit
esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident,
sunt in culpa qui officia deserunt mollit anim id est laborum
Voir la source
Sélectionnez <style
type="text/
css">
.b-style1 {
border-color
:
black
;
border-style
:
solid
;
margin-bottom
:
10px
;
background-color
:
#
93caff
;
}
.b-style2 {
border-color
:
black
;
border-style
:
double
;
margin-bottom
:
10px
;
background-color
:
#
93caff
;
}
.b-style3 {
border-color
:
black
;
border-style
:
dashed
;
margin-bottom
:
10px
;
background-color
:
#
93caff
;
}
.b-style4 {
border-color
:
black
;
border-style
:
dotted
;
margin-bottom
:
10px
;
background-color
:
#
93caff
;
}
.b-style5 {
border-color
:
black
;
border-style
:
inset
;
border-width
:
5px
;
margin-bottom
:
10px
;
background-color
:
#
93caff
;
}
.b-style6 {
border-color
:
black
;
border-style
:
outset
;
border-width
:
5px
;
margin-bottom
:
10px
;
background-color
:
#
93caff
;
}
.b-style7 {
border-color
:
black
;
border-style
:
ridge
;
border-width
:
5px
;
margin-bottom
:
10px
;
background-color
:
#
93caff
;
}
.b-style7 {
border-color
:
black
;
border-style
:
groove
;
border-width
:
5px
;
margin-bottom
:
10px
;
background-color
:
#
93caff
;
}
</style>
<
div
class=
"
b-style1
"
>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore
et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi
ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit
esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident,
sunt in culpa qui officia deserunt mollit anim id est laborum<
/
div>
<
div
class=
"
b-style2
"
>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore
et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi
ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit
esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident,
sunt in culpa qui officia deserunt mollit anim id est laborum<
/
div>
<
div
class=
"
b-style3
"
>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore
et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi
ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit
esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident,
sunt in culpa qui officia deserunt mollit anim id est laborum<
/
div>
<
div
class=
"
b-style4
"
>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore
et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi
ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit
esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident,
sunt in culpa qui officia deserunt mollit anim id est laborum<
/
div>
<
div
class=
"
b-style5
"
>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore
et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi
ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit
esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident,
sunt in culpa qui officia deserunt mollit anim id est laborum<
/
div>
<
div
class=
"
b-style6
"
>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore
et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi
ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit
esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident,
sunt in culpa qui officia deserunt mollit anim id est laborum<
/
div>
<
div
class=
"
b-style7
"
>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore
et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi
ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit
esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident,
sunt in culpa qui officia deserunt mollit anim id est laborum<
/
div>
<
div
class=
"
b-style8
"
>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore
et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi
ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit
esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident,
sunt in culpa qui officia deserunt mollit anim id est laborum<
/
div>
II-D-4. Bordure à gauche | border-left*▲
border-left : indique la couleur, l'épaisseur et le type de bordure pour la bordure gauche. L'ordre n'a pas d'importance.
Syntaxe : [ <border-width> || <border-style> || 'border-left-color' ] | inherit
Compatibilité : IE 5+, FF 1.0+, Chrome 0.2+, Safari 1.0+, Opera 6+
Note : la valeur inherit n'est pas supportée par IE 7 et précédents. IE 8 requiert un doctype. IE 9 supporte inherit.
Version CSS : 1
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore
et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi
ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit
esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident,
sunt in culpa qui officia deserunt mollit anim id est laborum
Voir la source
Sélectionnez <style
type="text/
css">
.b-left {
border-left
:
2px
dotted
red
;
width
:
70%
;
background-color
:
#
93caff
;
}
</style>
<
div
class=
"
b-left
"
>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore
et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi
ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit
esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident,
sunt in culpa qui officia deserunt mollit anim id est laborum<
/
div>
II-D-5. Bordure en haut | border-top*▲
border-top : indique la couleur, l'épaisseur et le type de bordure pour la bordure en haut. L'ordre n'a pas d'importance.
Syntaxe : [ <border-width> || <border-style> || 'border-top-color' ] | inherit
Compatibilité : IE 5+, FF 1.0+, Chrome 0.2+, Safari 1.0+, Opera 6+
Note : la valeur inherit n'est pas supportée par IE 7 et précédents. IE 8 requiert un doctype. IE 9 supporte inherit.
Version CSS : 1
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore
et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi
ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit
esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident,
sunt in culpa qui officia deserunt mollit anim id est laborum
Voir la source
Sélectionnez <style
type="text/
css">
.b-top {
border-top
:
2px
dotted
red
;
width
:
60%
;
background-color
:
#
93caff
;
}
</style>
<
div
class=
"
b-top
"
>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore
et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi
ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit
esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident,
sunt in culpa qui officia deserunt mollit anim id est laborum<
/
div>
II-D-6. Bordure à droite | border-right*▲
border-right : indique la couleur, l'épaisseur et le type de bordure pour la bordure à droite. L'ordre n'a pas d'importance.
Syntaxe : [ <border-width> || <border-style> || 'border-right-color' ] | inherit
Compatibilité : IE 5+, FF 1.0+, Chrome 0.2+, Safari 1.0+, Opera 6+
Note : la valeur inherit n'est pas supportée par IE 7 et précédents. IE 8 requiert un doctype. IE 9 supporte inherit.
Version CSS : 1
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore
et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi
ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit
esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident,
sunt in culpa qui officia deserunt mollit anim id est laborum
Voir la source
Sélectionnez <style
type="text/
css">
.b-right {
border-right
:
2px
dotted
red
;
width
:
60%
;
background-color
:
#
93caff
;
}
</style>
<
div
class=
"
b-right
"
>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore
et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi
ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit
esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident,
sunt in culpa qui officia deserunt mollit anim id est laborum<
/
div>
II-D-7. Bordure en bas | border-bottom*▲
border-bottom : indique la couleur, l'épaisseur et le type de bordure pour la bordure en bas. L'ordre n'a pas d'importance.
Syntaxe : [ <border-width> || <border-style> || 'border-bottom-color' ] | inherit
Compatibilité : IE 5+, FF 1.0+, Chrome 0.2+, Safari 1.0+, Opera 6+
Note : la valeur inherit n'est pas supportée par IE 7 et précédents. IE 8 requiert un doctype. IE 9 supporte inherit.
Version CSS : 1
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore
et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi
ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit
esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident,
sunt in culpa qui officia deserunt mollit anim id est laborum
Voir la source
Sélectionnez <style
type="text/
css">
.b-bottom {
border-bottom
:
2px
dotted
red
;
width
:
60%
;
background-color
:
#
93caff
;
}
</style>
<
div
class=
"
b-bottom
"
>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore
et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi
ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit
esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident,
sunt in culpa qui officia deserunt mollit anim id est laborum<
/
div>
II-D-8. Bordure tout-en-un | border*▲
border : permet de définir la bordure en une seule fois, aussi bien pour le style, l'épaisseur que la couleur.
Syntaxe : [ <border-width> || <border-style> || 'border-color' ] | inherit
Compatibilité : IE 5+, FF 1.0+, Chrome 0.2+, Safari 1.0+, Opera 6+
Note : la valeur inherit n'est pas supportée par IE 7 et précédents. IE 8 requiert un doctype. IE 9 supporte inherit.
Version CSS : 1
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore
et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi
ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit
esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident,
sunt in culpa qui officia deserunt mollit anim id est laborum
Voir la source
Sélectionnez <style
type="text/
css">
.border
{
border
:
2px
dotted
red
;
width
:
60%
;
background-color
:
#
93caff
;
}
</style>
<
div
class=
"
border
"
>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore
et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi
ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit
esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident,
sunt in culpa qui officia deserunt mollit anim id est laborum<
/
div>
II-D-9. Bordure arrondie | border-radius▲
border-radius : permet d'arrondir les angles
Syntaxe : <valeur>{1,4} / <valeur>{1,4}
Compatibilité : IE 9+, FF 4+, Chrome 0.2+, Safari 5+, Opera 6+
Version CSS : 3
Indiquez de une à quatre valeurs à la suite. Selon le nombre de valeurs que vous mettez, la signification change :
- une valeur : angle unique pour les quatre côtés ;
- deux valeurs : la première correspond à l'angle pour le haut et le bas, la seconde pour la gauche et la droite ;
- trois valeurs : la première correspond à l'angle du haut, la seconde pour la gauche et la droite, la troisième pour le bas ;
- quatre valeurs : respectivement : l'angle du haut, de la droite, du bas, de la gauche.
Complément d'information : Les bordures en CSS 3.
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore
et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi
ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit
esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident,
sunt in culpa qui officia deserunt mollit anim id est laborum
Voir le code source
Sélectionnez <style
type="text/
css">
.border-radius {
border-radius:
5px
10px
0
15px
;
background-color
:
yellow
;
border
:
1px
solid
red
;
padding
:
5px
; width
:
60%
;
}
</style>
<
div
class=
"
border-radius
"
>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore
et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi
ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit
esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident,
sunt in culpa qui officia deserunt mollit anim id est laborum<
/
div>
II-D-10. Ombre | box-shadow▲
box-shadow : permet d'ajouter un ombrage sur un élément.
Syntaxe : none | [, ]* <ombre> | inherit ou <ombre> [ <couleur>? <length> <longueur> <longueur>? <longueur>? | <longueur> <longueur> <longueur>? <longueur>? <couleur>? ] (source : MDN)
Compatibilité : IE 9+, FF 4+, Chrome 10+, Safari 4+, Opera 10.5+
Version CSS : 3
Explications sur la syntaxe (source : Créer des effets étonnants avec la propriété CSS3 box-shadow) :
- une valeur positive pour le décalage horizontal décale l'ombre vers la droite, une valeur négative vers la gauche ;
- une valeur positive pour le décalage vertical décale l'ombre vers le bas, une valeur négative vers le haut ;
- vous ne pouvez pas donner une valeur négative pour l'étendue de flou. Plus la valeur est grande, plus le flou s'étale ;
- une distance de propagation positive entraine une expansion de la zone d'ombre dans toutes les directions, une valeur négative entraine une contraction ;
- la couleur est celle de l'ombre ;
- la propriété inset indique une ombre interne plutôt qu'externe.
box-shadow:
2px
2px
4px
black
;
box-shadow:
2px
2px
4px
black
inset
;
box-shadow:
3px
3px
10px
1px
#
7b7b7b
;
Voir le code source
Sélectionnez <style
type="text/
css">
.box1 {
width
:
200px
;
height
:
100px
;
background-color
:
yellow
;
box-shadow:
2px
2px
4px
black
;
position
:
relative
;
margin-bottom
:
10px
;
}
.box2 {
position
:
absolute
;
top
:
1px
;
left
:
1px
;
font-style
:
italic
;
font-weight
:
bold
;
}
.box3 {
position
:
absolute
;
top
:
1px
;
right
:
1px
;
}
.box4 {
width
:
200px
;
height
:
100px
;
background-color
:
yellow
;
box-shadow:
2px
2px
4px
black
inset
;
position
:
relative
;
margin-bottom
:
10px
;
}
.box5 {
position
:
absolute
;
top
:
3px
;
left
:
5px
;
font-style
:
italic
;
font-weight
:
bold
;
}
.box6 {
position
:
absolute
;
top
:
3px
;
right
:
1px
;
}
.box7 {
box-shadow:
3px
3px
10px
1px
#
7b7b7b
;
border
:
1px
solid
#
cecdcd
;
background-color
:
white
;
width
:
80px
;
height
:
80px
;
}
</style>
<
div
class=
"
box1
"
>
<
div
class=
"
box2
"
>
Note :<
/
div>
<
div
class=
"
box3
"
>
[X]<
/
div>
<
/
div>
<
div
class=
"
box4
"
>
<
div
class=
"
box5
"
>
Note :<
/
div>
<
div
class=
"
box6
"
>
[X]<
/
div>
<
/
div>
<
div
class=
"
box7
"
>
<
/
div>
Les contours permettent d'entourer un élément. Bien que similaires aux bordures, ils diffèrent sur certains points :
- ils n'augmentent pas l'espace utilisé par l'élément mais se positionnent par dessus le contenu (voir exemple) ;
- ils ne sont pas nécessairement rectangulaires, bien que la plupart des navigateurs ne respectent pas la spécification (et dessinent des contours rectangulaires) ;
- on ne peut pas définir de contour spécifique à chaque côté ;
- en cas de saut de ligne, le contour n'est pas coupé, il est fermé en fin de ligne et ouvert à la ligne suivante, donnant visuellement deux contours.
Exemple :
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore
et dolore magna aliqua.
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi
ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit
esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident,
sunt in culpa qui officia deserunt mollit anim id est laborum.
Voir la source
Sélectionnez <style
type="text/
css">
.outline-w-p {
outline-width
:
thick
;
outline-color
:
gold
;
outline-style
:
solid
;
outline-offset:
5px
;
border
:
3px
solid
black
;
background-color
:
#
93caff
;
padding
:
0
.8em
;
width
:
80%
;
margin
:
10px
auto
20px
;
}
.outline-w-span {
outline-width
:
0
.8em
;
outline-color
:
silver
;
outline-color
:
rgba(214
,
214
,
214
,
0
.
8
);
outline-style
:
solid
;
}
</style>
<
p
class=
"
outline-w-p
"
>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore
et dolore <
span
class=
"
outline-w-span
"
>
magna aliqua.<
br
/
>
Ut enim<
/
span>
ad minim veniam, quis nostrud exercitation ullamco laboris nisi
ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit
esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident,
sunt in culpa qui officia deserunt mollit anim id est laborum.<
/
p>
II-E-1. Épaisseur du contour | outline-width▲
outline-width : permet de définir l'épaisseur du trait.
Syntaxe : thin | medium | thick | <longueur> | inherit
Compatibilité : IE 8+, FF 1.5+, Chrome 1.0+, Safari 1.2+, Opera 7+
Note : Les valeurs prédéfinies dépendent de l'agent utilisateur, néanmoins, les valeurs habituelles sont de 1px pour thin, 3px pour medium et 5px pour thick.
Version CSS : 2.1
Le contour est placé en avant du contenu, cachant éventuellement une partie de ce dernier comme dans l'exemple ci-dessus. Cependant, il ne constitue pas lui-même un élément et ne masque pas réellement les éléments qui sont en-dessous. Notamment, les liens restent cliquables ou le texte sélectionnable.
Exemples :
II-E-2. Couleur du contour | outline-color▲
outline-color : permet de définir la couleur du contour.
Syntaxe : <couleur> | invert | inherit
Compatibilité : IE 8+, FF 1.5+, Chrome 1.0+, Safari 1.2+, Opera 7+
Notes.
La valeur invert (qui est pourtant la valeur par défaut) n'est pas supportée par Chrome, Opera 15+ et Safari et a été abandonnée par Firefox 3.0+.
Pour les navigateurs ne supportant pas invert, la valeur par défaut correspond à la valeur calculée pour color.
Version CSS : 2.1
Exemples :
II-E-3. Type de contour | outline-style▲
outline-style : permet de définir le style du contour.
Syntaxe : <outline-style> | inherit
Compatibilité : IE 8+, FF 1.5+, Chrome 1.0+, Safari 1.2+, Opera 7+
Note : même si elle est peu appliquée, la spécification prévoit que le contour doit s'adapter aux débordements éventuels du contenu et peut ne pas être rectangulaire (Opera 12 et inférieurs respecte la spécification).
Version CSS : 2.1
- none (par défaut) : pas de bordure ;
- solid : ligne pleine ;
- double : ligne double : nécessite une taille de bordure de 3 pixels minimum) ;
- dashed : tirets ;
- dotted : pointillés ;
- inset : effet 3D "enfoncé" (dépend de la couleur de la bordure) ;
- outset : effet 3D "surélevé" (dépend de la couleur de la bordure) ;
- ridge : effet 3D double bordure (dépend de la couleur de la bordure) ;
- groove : autre effet 3D double bordure (dépend de la couleur de la bordure).
Exemples :
II-E-4. Décalage du contour | outline-offset▲
outline-offset : permet de décaler les limites du contour.
Syntaxe : <longueur> | inherit
Compatibilité : IE, FF 1.5+, Chrome 1.0+, Safari 1.2+, Opera 9.5+
Note : par défaut, le contour est collé aux limites de l'élément, si offline-offset est différent de 0, un espacement transparent est créé entre l'élément et le contour (si la valeur est négative, le contour est contracté à l'intérieur de l'élément).
Version CSS : 3
Exemples :
outline-offset:
0
;
outline-offset:
5px
;
outline-offset:
-5px
;
outline-offset:
0
.4em
;
II-E-5. Contour tout-en-un | outline▲
outline : permet de définir le contour en une seule fois, aussi bien pour le style, l'épaisseur que la couleur.
Syntaxe : [ <outline-width> || <outline-style> || <outline-color> ] | inherit
Compatibilité : IE 8+, FF 1.5+, Chrome 1.0+, Safari 1.2+, Opera 7+
Note : la propriété outline-offset ne peut pas être intégrée à la propriété raccourcie outline.
Version CSS : 2.1
Exemples :