02/05/2023
le modele de boite et la propriété box-sizing
avant d aborder le positionnement d elements html sur une page web il vaudrait mieux se faire une image precise de la representation des elements html par les navigateurs.
chaque element sur une page web est assimilable a une boite.cette boite possede les propriétés suivantes
-width représentant la largeur de l element
-height representant la hauteur de l element
- border(bordures) representant les bordures de la boite contenant en son centre le contenu de l element html.
-padding(bordure interne) representant les marges internes de l element html c est a dire l espace entre la bordure et le contenu de l element html.
-margin(marge exterieure) representant les marges externes de l element html c est a dire l espace entre la bordure de l element html et la bordure d un element voisin ou parent.
chacune de ces propriétés est utilisable en css pour modifier l apparence de l element.
generalement margin est utilisé pour creer de l espace entre les elements voisins ou parent.
padding quant a lui sert a "aerer" un element en ajoutant des espaces entre le contenu et la bordure.
border comme son noms l indique modifie les bordures /delimitations physiques de l elements.
width et height definissent la largeur et la hauteur de l element.
margin,padding et border peuvent s utiliser avec les suffixes -top,-left,-right,-bottom si l on souhaite modifier un côté precis.border-top par exemple modifie la bordure du côté superieur,margin-left modifie la marge extérieure gauche et padding-bottom modifiera la marge interne du côté bas de l element.
les valeurs seront soit absolues(pixel..) soit relatives(%,vw ,vh,rem,em) et il est possible de composer ces propriétés.
border par exemple combine 3 valeurs et se presente generalement sous la forme
border :dimension type couleur
pour une bordure de 2pixels en trait continu de couleur noire on peut donc dire
border:1px solid black ....
les propriétés width et height meritent un peu plus d attention car elles dependent d une autre propriété qui est box-sizing.
box-sizing permet de definir comment la hauteur et la largeur des elements sera calculée.elle prends 2 valeurs :border-box et content-box.content-box etant la valeur par defaut.
lorsque box-sizing vaut content-box les proprietes width et height definissent la taille du contenu.pour trouver la taille exacte de l element il faudra donc ajouter a la valeur de width/height ,les tailles des bordures gauche et droite et les tailles des marges internes gauche et droite si existantes.
c est extrêmement important et a garder a l esprit car dans ce cas de figure si l on souhaite avoir un bloc de 200px*200px par exemple composé de bordure disons de 2px et padding 10px il faudra donner pour valeur(200px-( (2px*2)+(10px*2) ) = 176px aux propriétés width et height. non 200px au risque d avoir un layout plus grand car si l on assigne a width et height la valeur 200px on aura un element de taille totale 224px*224px en tenant compte des dimensions des bordures et marge internes gauche et droite.
lorsque box-sizing par contre vaut border-box,les propriétés width et height definissent les dimensions exactes de l element en prenant en compte les bordures et les marges internes.la largeur du contenu de l element est calculée automatiquement en soustrayant les dimensions des bordures et marges internes ,dans le but d avoir un element de dimensions totales egalent aux valeurs specifiées a width/height.
ainsi pour avoir un bloc de 200px*200px avec une bordure de 2px et des marges internes de 10px ,il n y a plus de calcul a faire car le navigateur en comprenant box-sizing:border-box sait que l element a une largeur totale de 200px et calcule automatiquement la taille du contenu de telle sorte que contenu+bordure+marges internes fassent 200px ..cool ou bien?
une bonne pratique est de toujours commencer par definir cette propriété dans vos codes css.
*,*:after,*:before{ box-sizing:border-box;}
ca vous evitera des mesaventures avec les tailles de vos elements html(elements qui prennent plus de place qu ils ne devraient dans le design etc...)..
n hesitez pas a me contacter pour plus d eclaircissements ou corrections.les posts prochains porteront sur le positionnement en css.c est l un des themes les plus perturbants pour les etudiants,comme d habitude nous allons vulgariser cette question.
partagez et likez ce post si vous le trouvez
instructif et rdv au suivant.
-sizing
