CSS Positionnement et modèle de boite

Lorsque vous positionnez des éléments en position relative, il faut faire attention au modèle de boite.

Soit les div de classe carre, il sont dans une autre div, et positionnés avec top et left.

        .carre {
            box-sizing: border-box;
            // box-sizing: content-box;
            position: relative;
            width: 100px;            height: 100px;
            background: blue;            border:red solid 1px;
        }

box-sizing : content-box

Ici on prend en compte l’épaisseur de la bordure pour détermine la position de l’élément suivant.

Ici est tenu compte de l’épaisseur des toutes les bordures (élément avant et après)

box-sizing:border-box

Ici on ne tient pas compte de l’épaisseur des bordures pour détermine la position de l’élément suivant

En faisant fi de l’épaisseur des bordure, le placement est beaucoup plus facile (pour pas dire possible)
Retour en haut