Le dimensionnement des éléments en CSS

Le dimensionnement des éléments en CSS

  1. Objectif

    • Connaitre Le dimensionnement des éléments en CSS
    • Etre capable d’utiliser la propriété CSS box-sizing: border-box
  2. Présentation

    • Les éléments de type bloc ou certains éléments de type en ligne (ceux ayant des dimensions par défaut – hauteur et largeur – comme , par exemple) ont des propriétés de dimensionnement communes ; on parle alors du “modèle de boîte“.Ces propriétés sont :
      • width et height, portant sur la largeur et la hauteur
      • padding, portant sur la marge interne
      • margin, portant sur la marge externe
      • border, portant sur les bordures
    • Le schéma suivant montre l’utilisation des différents propriétés
    • Le dimensionnement des éléments en CSS




  3. Utilisation

    1. Syntaxes
      • width: | NN% | auto | inherit
      • height: | NN% | auto | inherit
  4. La propriété box-sizing

    • La propriété box-sizing CSS nous permet d’inclure le remplissage et la bordure dans la largeur et la hauteur totales d’un élément.
    • Par défaut, la largeur et la hauteur d’un élément sont calculées comme suit:
      • width + padding + border = largeur réelle d’un élément(Largeur à l’écran)
      • height + padding + border = hauteur réelle d’un élément(Hauteur de l’écran)
    • L’illustration suivante montre deux éléments <div> avec les mêmes largeur et hauteur spécifiées:
    • Le style est : width: 300px;height: 100px;border: 1px solid blue;float: left;
      Le style est:width: 300px;height:20px;border: 1px solid red;padding:100px;float: left;
    • Si vous définissez box-sizing: border-box;un élément, le remplissage et la bordure sont inclus dans la largeur et la hauteur:



Abonnez vous à notre chaîne YouTube gratuitement