Read on Twitter
Understanding CSS Box Model:
A thread
A thread
Every element is a box in web design.
Our job is to move boxes. Pretty easy.
The box contains further 4 boxes and 2 invisible (whoo) boxes.
Our job is to move boxes. Pretty easy.
The box contains further 4 boxes and 2 invisible (whoo) boxes.
1. Content box
It contains the content (text, image, etc.)
2. Padding box:
It is the box surrounding content. It clears area around content. It is transparent.
3. Border box:
It is the box around padding.
4. Margin box
Clears the area around border. It is transparent.
It contains the content (text, image, etc.)
2. Padding box:
It is the box surrounding content. It clears area around content. It is transparent.
3. Border box:
It is the box around padding.
4. Margin box
Clears the area around border. It is transparent.
The invisible combo of boxes is:
5. Box shadow
6. Outline
These boxes does not affect spacing because they are painted over the element (box).
5. Box shadow
6. Outline
These boxes does not affect spacing because they are painted over the element (box).
There are so many boxes, so how's the width and height calculated?
Here's how:
Here's how:
There are two box models that are used:
The Standard CSS box model:
The width and height attributes set the width and height of the content box.
It's harmful because padding and border add to them and the element appears bigger.
For example:
The Standard CSS box model:
The width and height attributes set the width and height of the content box.
It's harmful because padding and border add to them and the element appears bigger.
For example:
The Alternative Box Model:
Alternatively, we can guide the browser to consider the width and height to the border box so that elements appear the exact size.
Here's how to turn it on:
Alternatively, we can guide the browser to consider the width and height to the border box so that elements appear the exact size.
Here's how to turn it on:
You might have noticed that margin, box-shadow and outline have no role in calculating the total width/height.
Therefore I recommend that instead of using the BORDER HACK to visualize elements.
Use OUTLINE because it does not affect spacing.
Therefore I recommend that instead of using the BORDER HACK to visualize elements.
Use OUTLINE because it does not affect spacing.
It's easier to visualize layouts and web design when considering all elements as boxes.
This was 'ah-ha' moment for me while learning CSS because it simplifies the process.
Hope it rang a bell for you too.
Have a great time learning.
This was 'ah-ha' moment for me while learning CSS because it simplifies the process.
Hope it rang a bell for you too.
Have a great time learning.