Internet  | Création de pages Web  | CSS  | CSS: en haut, en bas, à gauche, à droite

CSS: en haut, en bas, à gauche, à droite

Parmi les nombreuses propriétés que CSS propose, certaines sont essentielles pour gérer l'espacement et la position des éléments, comme les propriétés relatives aux marges, aux paddings... Ces propriétés utilisent souvent les suffixes -left, -right, -top et -bottom pour indiquer les côtés spécifiques sur lesquels l'effet sera appliqué.Dans cet article, nous allons détailler l'utilisation de ces propriétés ainsi que les notations raccourcies qui permettent d’écrire du CSS de manière plus concise et efficace.

    4ttr
  • Découverte

Propriétés avec *-left, *-right, *-top, *-bottom

1. Margin (les marges)

La propriété margin définit l'espacement extérieur autour d'un élément. Vous pouvez spécifier une marge différente pour chaque côté : margin-top, margin-right, margin-bottom, margin-left.

Exemple :

/* Marges définies individuellement */
margin-top: 10px;
margin-right: 15px;
margin-bottom: 10px;
margin-left: 15px;

Notation raccourcie :

Vous pouvez également utiliser la notation raccourcie pour définir toutes les marges en une seule ligne. L'ordre des valeurs est toujours : top, right, bottom, left.

/* Notation raccourcie avec quatre valeurs */
margin: 10px 15px 10px 15px;

/* Notation raccourcie avec deux valeurs (top/bottom et left/right) */
margin: 10px 15px;

/* Notation avec une seule valeur pour tous les côtés */
margin: 10px;

2. Padding (les espacements internes)

La propriété padding détermine l'espace à l'intérieur de l'élément, entre son contenu et sa bordure. Elle fonctionne de la même manière que margin, avec des propriétés comme padding-top, padding-right, padding-bottom, padding-left.

Exemple :

/* Padding défini individuellement */
padding-top: 5px;
padding-right: 10px;
padding-bottom: 5px;
padding-left: 10px;

Notation raccourcie :

/* Notation raccourcie avec quatre valeurs */
padding: 5px 10px 5px 10px;

/* Notation raccourcie avec deux valeurs */
padding: 5px 10px;

/* Une seule valeur pour tous les côtés */
padding: 5px;

3. Border (les bordures)

La propriété border contrôle l'apparence de la bordure d'un élément, avec des variations comme border-top, border-right, border-bottom, border-left. Pour chaque côté, vous pouvez spécifier la largeur, le style et la couleur de la bordure.

Exemple :

/* Bordure définie individuellement */
border-top: 2px solid black;
border-right: 1px dashed blue;
border-bottom: 2px solid black;
border-left: 1px dashed blue;

Notation raccourcie :

/* Notation raccourcie pour la bordure */
border: 2px solid black;

Vous pouvez aussi spécifier les bordures de chaque côté avec des valeurs différentes en utilisant cette notation raccourcie :

/* Notation raccourcie avec des bordures différentes sur les côtés */
border-width: 2px 1px 2px 1px; /* top, right, bottom, left */

Explications sur la Notation Raccourcie

Dans CSS, les notations raccourcies sont des moyens efficaces d'écrire des styles sans répéter des lignes de code pour chaque côté. Cela réduit non seulement le volume de votre code, mais améliore aussi sa lisibilité.

La règle générale des notations raccourcies :

  • Une valeur : s'applique à tous les côtés.
  • Deux valeurs : la première pour top/bottom et la seconde pour left/right.
  • Trois valeurs : la première pour le top, la seconde pour left/right, et la troisième pour le bottom.
  • Quatre valeurs : s'appliquent respectivement à top, right, bottom, left.

Exemples :

  1. Margin avec deux valeurs :

    margin: 10px 20px;

    Cela signifie une marge de 10px en haut et en bas, et une marge de 20px à gauche et à droite.

  2. Padding avec quatre valeurs :

    padding: 5px 10px 15px 20px;

    Cela donne un padding de 5px en haut, 10px à droite, 15px en bas, et 20px à gauche.

Liste des Propriétés Compatibles

Voici une liste non exhaustive des propriétés CSS qui fonctionnent avec les valeurs *-left, *-right, *-top, et *-bottom, ainsi que leurs notations raccourcies.

  1. margin

    • margin-top
    • margin-right
    • margin-bottom
    • margin-left
    • Notation raccourcie : margin

  2. padding

    • padding-top
    • padding-right
    • padding-bottom
    • padding-left
    • Notation raccourcie : padding

  3. border-width

    • border-top-width
    • border-right-width
    • border-bottom-width
    • border-left-width
    • Notation raccourcie : border-width

  4. border-style

    • border-top-style
    • border-right-style
    • border-bottom-style
    • border-left-style
    • Notation raccourcie : border-style

  5. border-color

    • border-top-color
    • border-right-color
    • border-bottom-color
    • border-left-color
    • Notation raccourcie : border-color

  6. border-radius

    • border-top-left-radius
    • border-top-right-radius
    • border-bottom-right-radius
    • border-bottom-left-radius
    • Notation raccourcie : border-radius

  7. position (avec les valeurs top, right, bottom, left)

  8. background-position

Conclusion

Les propriétés CSS qui incluent *-left, *-right, *-top, et *-bottom sont essentielles pour gérer l'espacement, la mise en page et la position des éléments sur une page web. Comprendre comment utiliser ces propriétés individuellement et comment exploiter les notations raccourcies permet non seulement de mieux structurer vos feuilles de style, mais aussi de maintenir votre code propre et facile à gérer.

Utiliser ces propriétés de manière efficace est une compétence clé dans le développement front-end, qui impacte directement l’apparence et l’expérience utilisateur sur vos sites web.

Télécharger en PDF

Pour aller plus loin