* * *

css spacing

2022-05-22

We 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;

help


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;

help


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;

hey! this doesn't look too bad


This tutorial is incomplete, sorry!
I'm hoping to add some info on margin and flex gap later.