Supposedly...
Every single thing in CSS is a box.
This means that every single HTML element is a box!
Anytime you come across the word "element" in HTML/CSS, just think
[box].
To manipulate the design and layout of a webpage, you must learn to
manipulate these boxes elements.
Padding vs Margin
First, the Border
The border of an element is exactly that: the border of an element.Since everything in CSS is a box, the borders are the outside lines of these boxes.
Everything in your element is inside of these borders!
Like most things in CSS, borders can be manipulated in size, appearance, etc.
Padding
Padding is the space between the borders of the element and the actual content inside of the element.Padding determines the position of your content in relation to your element.
Translation: padding determines where in your [box] your contents appear.
Margin
Margin is the space outside of your element.Margins are used to control the position of an element in relation to those around it.
Translation: margins are used to move a [box] up, down, left, or right on a page.
If you can't tell, this is an image of a wall with two picture frames, okay?
Both picture frames clearly contain a picture.
In this awesome example, the wall is your webpage and the picture frames are your elements.
Therefore:
- The picture itself is the content
- The space between the picture and the borders of the picture frame is the padding
- The borders of the picture frames are... the borders
- The space between the picture frames are the margins
Next: CSS Padding & Margin