css spacing
2022-05-22We start with something that looks like a box. As soon as we add some text inside, it starts to look off due to lack of spacing:
width: 220px;
height: 180px;
border: 2px solid #55B5DB;
The solution is to give the box some padding.
padding: 5px;
adds 5px padding on each side
padding: 4px 8px;
adds 4px vertical and 8px horizontal padding
padding: 1px 2px 3px 4px;
the order here is always top-right-bottom-left
width: 220px;
height: 180px;
border: 2px solid #55B5DB;
padding: 30px 50px;
Our box became bigger! That wasn't intentional...
Why this happened:
2px left border
+ 50px left padding
+ 220px width
+ 50px right padding
+ 2px right border
= 324px
Similar thing happened to the height.
While we could reduce the width by 104px (the sum of horizontal borders and padding), and the height by 64px (the sum of vertical borders and padding), there is a better option: box-sizing: border-box;
width: 220px;
height: 180px;
border: 2px solid #55B5DB;
padding: 30px 50px;
box-sizing: border-box;
This tutorial is incomplete, sorry!
I'm hoping to add some info on margin and flex gap later.