When I first saw these three terms explained my eyes sort of glazed over.
Isn't a margin like a border? Isn't padding just a margin?
All three terms merged into one ambiguous entity and I moved on --
there was much more to learn, no time to stop on this simple thing!
Even while building my own website and using these terms I remained
blurry-eyed on exactly what was doing what. In my code I threw in amounts of
margins and borders and padding and despite looking at the helpful
Devtools [above image] I pushed on ahead still without fully understanding which
aspect was actually doing what in this layer cake. And just when I thought I had it,
the next time I wanted to put some space between the
building blocks of my website I'd forget once more.
Until having to do this blog entry.
Now I've got it. Now that I slowed down and took a few minutes to
get it through the border of my skull.
So first off, let's get these borders out the way. They're the most intuitive and familiar to anyone
who's done any kind of design or art before. A border is a border.
It's the line around an object. Whether it's a block of writing or an image
or anything else. You can add a border, colour it, change the thickness.
And boom. You're done. I haven't used many in my website as I've gone
for a clean minimal look, as is the cool way to design sites these days.
Borders are out.
Onto margins. If you think of a website page as a bunch of separate blocks
of content, margins are what space them out from each other, it's the outer limit.
Using a large margin will push the neighbouring blocks away. A margin is the
block's personal space.
Padding. Now that you know that margins are a block's personal space,
and borders are borders, padding will make sense.
Imagine a literal box,
a wooden one, with a kitten in it, but don't worry the kitten is well
looked after, she has a blanket around her, a bunch of padding.
The kitten is content. 'Content' in both senses of the word: meaning happy and
literally the created content of the website (images/writing etc.).
The kitten is in a box (the edges of which are the border) and the kitten has
its personal space by being away from other kitten boxes in this cat
filled room that seems to have emerged before us.
Every piece of content on a website page is in a box of these three layers.
Padding: Content blanket.
Margin: Personal space.
Border: Border.
Lazy way back to top!