Un élément HTML est composé de 4 blocs imbriqués les uns dans les autres :
Voici un schéma général des marges en CSS :
Les dimensions des éléments HTML peuvent être personnalisées à l'aide des propriétés suivantes :
height
définit la hauteur en pixel (px), point (pt), centimètre (cm), pourcentage (%) ...width
définit la largeur en pixel (px), point (pt), centimètre (cm), pourcentage (%) ...max-height
définit la hauteur maximummax-width
définit la largeur maximummin-height
définit la hauteur minimummin-width
définit la largeur minimumVoici un exemple :
height: 150;
max-width: 400px;
L'exemple ci-dessus impose une hauteur de 200 pixels et une largeur maximum de 400 pixels :
Les bordures des éléments HTML peuvent être personnalisées. Il existe de nombreux paramètres permettant la mise en forme des bordures, en voici quelques-uns parmi les plus courants :
border-color
: définit la couleur de la bordureborder-width
: définit l'épaisseur de la bordureborder-style
: définit le style de la bordure (caché, continu, pointillés ...)border-radius
: définit le rayon de l'arrondi des coinsVoici un exemple :
border-width: 6px;
border-style: solid;
border-radius: 20px;
L'exemple ci-dessus crée une bordure continue de 6 pixels avec des arrondis de 20 pixels :
La taille des marges intérieures peut être définie à l'aide des propriétés suivantes :
padding-top
: taille de la marge intérieure supérieurepadding-right
: taille de la marge intérieure à droitepadding-bottom
: taille de la marge intérieure inférieurepadding-left
: taille de la marge intérieure à gauchepadding
: définit les quatre marges intérieures dans l'ordre haut, droite, bas puis gaucheLes valeurs peuvent être :
auto
: le navigateur ajuste au mieux les margesinherit
: les marges sont héritées de l'élément parentVoici un exemple :
padding-top: 100px;
padding-right: 300px;
padding-bottom: 50px;
padding-left: 40px;
La taille des marges extérieures peut être définie à l'aide des propriétés suivantes :
margin-top
: taille de la marge extérieure supérieuremargin-right
: taille de la marge extérieure à droitemargin-bottom
: taille de la marge extérieure inférieuremargin-left
: taille de la marge extérieure à gauchemargin
: définit les quatre marges extérieures dans l'ordre haut, droite, bas puis gaucheLes valeurs peuvent être :
auto
: le navigateur ajuste au mieux les margesinherit
: les marges sont héritées de l'élément parentVoici un exemple :
margin: 100px 300px 50px 40px;
Considérons le code HTML suivant:
<h1>Heading 1</h1>
<h2>Heading 1</h2>
<h3>Heading 1</h3>
<h4>Heading 1</h4>
<h5>Heading 1</h5>
<h6>Heading 1</h6>
Supprimez les marges en haut et bas de chaque titre, puis ajouter une marge intérieure pour chaque élément :
h1
: 0 pixelh2
: 20 pixelsh3
: 40 pixelsh4
: 60 pixelsh5
: 80 pixelsh6
: 100 pixelsVoici le résultat escompté:
Un élément HTML est constitué ...
Quel attribut CSS permet de spécifier les marges intérieures ?
Dans le style suivant, quelle est la taille de la marge de droite ?
margin: 10px 20px 30px 40px;
Quelle instruction permet de spécifier une bordure de 10 pixels ?