Box-sizing and why it matters

An understanding of box-sizing is of tremendous importance when building stable and solid responsive layouts. Box-sizing is part of the box-model CSS module, it dictates how the browser should render box elements. Box-sizing is connected to four CSS properties:

  • width
  • height
  • padding
  • border

The box-sizing answers the question of: “How should these four CSS properties be applied when rendering a box element? Should they be applied within or outside the box content? The answer to these questions will determine how box elements will react to change of these specific CSS properties.

Two values are attributed to box-sizing property: content-box and border-box.

… Image box here …

content-box: The box element grows from the content-out


div {
box-sizing: content-box;
}

Applying the content-box value forces the browser to apply the padding and border values outside the box element edges. This means editing the padding and border CSS values will affect the element starting from its content, moving outside (the content remains the same while the width and height will either shrink or expand). This can be summarized by the following equations:

Applying the content-box value forces the browser to include the padding and border values in calculating the final rendering of the box element width and height. This means the box will grow from the outside while its content will remain the same. This can be summarized by the following equations:

Rendered box element = width + padding + border
Rendered box element = height + padding + border

Pros: It might be probably useful to employ the content-box in case you want a dynamically added element to push its container or the adjacent boxes around.

Cons: content-box creates an unstable layout because any change of padding or border affects a box element width and height, which in turn affects everything around (container, adjacent boxes, …).

border-box: The box element grows from the border-inward


div {
box-sizing: border-box;
}

Applying the border-box value forces the browser to apply the padding and border values within the box element edges. This means editing the padding and border CSS values will affect the element starting from its border, moving inside (the content will either shrink or expand while the width and height will remain the same). This can be summarized by the following equations:

Box element actual width = width + padding + border
Box element actual height = height + padding + border

Pros: content-box helps create very stable layouts are also very easy to maintain. Because editing the padding or border of an element only affect what is inside that element.

Cons: Difficult to see a con of this method (feel free to let me know if you find any).

Best Practices

It is strongly recommended to use the border-box as a base for your layout box-sizing. Thankfully, all the major CSS frameworks these days are initially set up with border-box, but it’s always important to understand the why things are the way they are.

Further reading

La ville étrangère

Peut être que tout ces rêves ne sont que des illusions

Peut être ne devrais-je que me contenter de ces idées et images qui fusent dans ma tête sans cesse comme un troupeau de buffle traversant la savane au galop

Peut être n’arriverai-je jamais à sortir de ce ghetto où je me suis perdu

Peut être …

La vie est un mystère, une aventure

Fatigué d’une longue semaine de travail, je m’etais endormi dans ce train, rêvant aux généreuses rondeurs de ma femme et de ses plats délicieux. Je m’était ensuite reveillé aux sons de la voix d’un homme qui parlait doucement, mais dans une langue étrange, et dont l’accoutrement et les gestes indiquaient certainement qu’il etait le controlleur et que le train était à son terminus.

Je decendi donc du train, me dirigeant vers le quai opposé, voulant prendre le train de routour, décidé cette  fois-ci à ne pas rater mon arrêt. Il était 10 heures du soir à ma montre. “Bon sang, Ngono doit sûrement être morte d’inquiétude, je devrai peut être l’appeller”.

Tout me semblait étrange, c’était comme si même la langue locale m’était inconnue.

Les gens parlaient, marchaient, se comportaient différemment de ce que j’avais déjà rencotré jusque là. Même les couleurs de la ville étaient différentes.

Au départ, j’ai commencé a chercher mon chemain, confiant, presque arrogant, sûr de retrouver ma route. “Nous serons de serons de retour sur la bonne route en un rien de temps” disais-je gaillardement.

 

Reussirai-je un jour à maîtriser cette vie? Parviendrai-je finallement à choisir le bon train qui me ramènera chez moi,là où m’attendent ma famille et mes amis?

Peut être oui, peut être non

Peut être

 

Les aventures mysterieuses