Ajout d'Espace avec les Marges et le Remplissage
Les propriétés margin, padding et border permettent d’ajouter de l’espace aux éléments, améliorant ainsi l’apparence, la lisibilité et l’utilisabilité de la ressource web. Examinons chacune d’elles de plus près.
Propriétés margin et padding
padding
padding désigne l’espace entre le contenu d’un élément et sa bordure.
padding: top right bottom left
Nous disposons de plusieurs méthodes pour attribuer une valeur au remplissage (padding).
Raccourci
/* Same padding of 20px applied to all four sides: */
padding: 20px;
/* Top and bottom paddings of 10px, left and right paddings of 20px: */
padding: 10px 20px;
/* Top padding of 10px, left and right paddings of 20px, bottom padding of 5px: */
padding: 10px 20px 5px;
/* Top padding of 10px, right padding of 15px, bottom padding of 20px, left padding of 25px: */
padding: 10px 15px 20px 25px;
Chaque remplissage séparément
padding-top: 10px;
padding-right: 15px;
padding-bottom: 25px;
padding-left: 5px;
margin
margin désigne l'espace entre un élément et les éléments adjacents. Il s'agit de la zone située à l'extérieur de la bordure de l'élément.
margin: top right bottom left
Nous pouvons appliquer la propriété margin de plusieurs façons.
Raccourci
/* Same margin of 20px applied to all four sides: */
margin: 20px;
/* Top and bottom margins of 10px, left and right margins of 20px: */
margin: 10px 20px;
/* Top margin of 10px, left and right margins of 20px, bottom margin of 5px: */
margin: 10px 20px 5px;
/* Top margin of 10px, right margin of 15px, bottom margin of 20px, left margin of 25px: */
margin: 10px 15px 20px 25px;
Chaque marge séparément
margin-top: 10px;
margin-right: 15px;
margin-bottom: 25px;
margin-left: 5px;
Propriété border
border désigne la ligne qui entoure le padding et le contenu d’un élément. Il s’agit de la zone qui sépare le contenu de l’élément de sa marge.
border: width style color;
Raccourci
border: 4px solid brown;
Cela signifie que la bordure de tous les côtés sera identique. Leur width est 4px, le style est solid et la color est brown.
Considérons l’exemple suivant et examinons les styles de bordure possibles :
index.html
styles.css
Résultat
Chaque bordure séparément
/* Instead of `top`, can be used any side (`right`, `left`, or `bottom`) */
border-top-color: aquamarine;
border-top-width: 12px;
border-top-style: groove;
border-top-right-radius: 4px;
border-top-left-radius: 8px;
1. Quelle est la différence entre margin et padding en CSS ?
2. Quel est le but de la propriété border ?
3. Comment appliquer différentes valeurs de margin aux différents côtés d’un élément ?
Merci pour vos commentaires !
Demandez à l'IA
Demandez à l'IA
Posez n'importe quelle question ou essayez l'une des questions suggérées pour commencer notre discussion
Awesome!
Completion rate improved to 2.56Ajout d'Espace avec les Marges et le Remplissage
Glissez pour afficher le menu
Les propriétés margin, padding et border permettent d’ajouter de l’espace aux éléments, améliorant ainsi l’apparence, la lisibilité et l’utilisabilité de la ressource web. Examinons chacune d’elles de plus près.
Propriétés margin et padding
padding
padding désigne l’espace entre le contenu d’un élément et sa bordure.
padding: top right bottom left
Nous disposons de plusieurs méthodes pour attribuer une valeur au remplissage (padding).
Raccourci
/* Same padding of 20px applied to all four sides: */
padding: 20px;
/* Top and bottom paddings of 10px, left and right paddings of 20px: */
padding: 10px 20px;
/* Top padding of 10px, left and right paddings of 20px, bottom padding of 5px: */
padding: 10px 20px 5px;
/* Top padding of 10px, right padding of 15px, bottom padding of 20px, left padding of 25px: */
padding: 10px 15px 20px 25px;
Chaque remplissage séparément
padding-top: 10px;
padding-right: 15px;
padding-bottom: 25px;
padding-left: 5px;
margin
margin désigne l'espace entre un élément et les éléments adjacents. Il s'agit de la zone située à l'extérieur de la bordure de l'élément.
margin: top right bottom left
Nous pouvons appliquer la propriété margin de plusieurs façons.
Raccourci
/* Same margin of 20px applied to all four sides: */
margin: 20px;
/* Top and bottom margins of 10px, left and right margins of 20px: */
margin: 10px 20px;
/* Top margin of 10px, left and right margins of 20px, bottom margin of 5px: */
margin: 10px 20px 5px;
/* Top margin of 10px, right margin of 15px, bottom margin of 20px, left margin of 25px: */
margin: 10px 15px 20px 25px;
Chaque marge séparément
margin-top: 10px;
margin-right: 15px;
margin-bottom: 25px;
margin-left: 5px;
Propriété border
border désigne la ligne qui entoure le padding et le contenu d’un élément. Il s’agit de la zone qui sépare le contenu de l’élément de sa marge.
border: width style color;
Raccourci
border: 4px solid brown;
Cela signifie que la bordure de tous les côtés sera identique. Leur width est 4px, le style est solid et la color est brown.
Considérons l’exemple suivant et examinons les styles de bordure possibles :
index.html
styles.css
Résultat
Chaque bordure séparément
/* Instead of `top`, can be used any side (`right`, `left`, or `bottom`) */
border-top-color: aquamarine;
border-top-width: 12px;
border-top-style: groove;
border-top-right-radius: 4px;
border-top-left-radius: 8px;
1. Quelle est la différence entre margin et padding en CSS ?
2. Quel est le but de la propriété border ?
3. Comment appliquer différentes valeurs de margin aux différents côtés d’un élément ?
Merci pour vos commentaires !
