La boîte

En CSS, le modèle de boîte décrit les boîtes rectangulaires générées pour les éléments disposés dans la page.
Essentiellement, tout est un rectangle.

 

 

Quelques faits intéressants :

• border-radius arrondit les coins de cette boîte.
• box-shadow ajoute une ombre à cette boîte.
• outline et box-shadow ne font pas partie de la boîte et n’ont donc aucun effet sur la mise en page.

Dimensionnement des boîtes

La propriété box-sizing vous donne un peu de contrôle sur la façon dont les boîtes sont dimensionnées dans ce modèle. Les deux valeurs possibles pour box-sizing sont content-box et border-box

content-box
La valeur par défaut. Lors du calcul de la taille de la boîte, un padding et une bordure sont ajoutés.

border-box
Lors du calcul de la taille de la boite le padding et la bordure sont pris en compte.

Exemple

Ces deux boîtes ont la feuille de style CSS suivante, mais l’une à la taille d’une boîte (content-box) et l’autre celle d’une boîte (border-box).

.box {
    height: 5em;
    width: 5em;
    padding: 1em;
    border: .25em solid
}

 

Dans le cas de border-box, la largeur et la hauteur de .box sont de 5em, exactement ce que nous avons défini.

Dans le cas de content-box, la largeur et la hauteur sont de 7,5em = 5 + (2 * 1) + (2 * .25), puisque nous devons inclure le rembourrage et la bordure des deux côtés.

 

Flexible inputs

L’un des avantages de l’utilisation de border-box est qu’il est possible de définir un padding et une width d’unités mixtes sans créer des bugs de dimensionnement. Une utilisation fantastique est la création d’input flexibles avec une taille de padding fixe.

Dans l’exemple ci-dessous, notre entrée a un padding spécifique en ems et nous pouvons néanmoins spécifier une width en % (padding : .4em .55em et width : 100%, respectivement).

input[type="text"] {
    /* Flexibility */
    box-sizing: border-box;
    width: 100%;

    /* Styling */
    padding: .4em .55em;
    font-size: inherit;
    font-family: inherit;
    color: inherit;
    border: 0;
    border-radius: .25em;
    outline: none
}

source: https://adamschwartz.co/magic-of-css/chapters/1-the-box/

 

 

Si vous voulez que la hauteur et la largeur se comportent de la manière la plus intuitive, écoutez Paul Irish et placez ceci en tête de votre CSS :

 

html {
  box-sizing: border-box
}
*, *::before, *::after {
  box-sizing: inherit
}