A Deep Dive into CSS Padding and Margin
Why do you need this?
Because padding and margin are two crucial design elements designers and developers mix up ALL the time (no shame if this is you!).
I still find myself having to think just a little too hard about the difference when I’m writing CSS. Although there’s a distinct difference between the padding and margin, sometimes my brain is like…. “wait, what?”.
Already know the difference? Just here to learn CSS for padding and margin?
Amazing! You can just scroll down below the video and learn more about using padding and margin in your Squarespace custom CSS :)
SO… WHAT IS THE DIFFERENCE?
The above graphic is probably the best representation for us visual folks, but here it is in words:
Padding:
Padding is the internal space within an element providing separation between the content and the element’s boundaries.
Think of text inside of a circle: padding is how much space you want between the text box and the border of the circle.
Margin:
Margin is the external spacing around an element, defining the clearance between that element and its neighboring elements.
Think of the space between a circle and a square beside it (or the circle and the edge of the page).
GET OUR CSS SELECTOR CHEAT SHEET ON SALE FOR A LIMITED TIME!
The best $4.99 you’ll ever spend →
Let’s look at padding & margin in CSS:
FOR PADDING AND MARGIN, THERE ARE 4 SIDES:
TOP, RIGHT, BOTTOM, LEFT — IN THAT ORDER!
If you want to target just one side, the declaration is pretty simple. For example:
{ margin-left: 20px; }
If you want the value to be the same on all 4 sides, it’d look like this:
{ margin: 20px; }
If you want the top and bottom values to be the same and the left and right values to be the same, it would look like this (first value is top and bottom, second is left and right):
{ margin: 10px 20px; }
If you want all 4 values to be different, you need to list all 4 and they will apply in this order — top, right, bottom, left:
{ margin: 10px 20px 8px 22px; }
PADDING:
Here’s a simple example to get us started: say you want to add padding to a button (aka more space between the text and the edges of the button). The generic CSS rule would look like this:
.button {padding: 10px 20px;}But since we’re Squarespace designers, we have to find the Squarespace-specific selector, plus we’d probably want to target a single button. So that’d look more like this:
Tip! You can learn WAY more about selectors with our CSS Cheat Sheet or learn how to apply CSS to one single element (i.e. one button) in our posts about finding and targeting block IDs.
#BLOCK-ID {.sqs-block-button-element {padding: 10px 20px;}}You also MAY need to add the !important tag like this:#BLOCK-ID {.sqs-block-button-element {padding: 10px 20px !important;}}Cool, now let’s do something very similar but more custom: here’s how to add a pill-shaped background behind certain text. I usually use this to add emphasis to “eyebrow” copy or to create the illusion of a button from text.
In this example the padding is dictating how much space is between the text and the edge of the pill shape. You’ll notice this example includes 2 padding values: vertical padding (top and bottom) followed by horizontal padding (left and right).
Tip! This example applies to all italic text on your site. Check out our post here to learn more about styling italic fonts and targeting more specific areas. Adjust all values as needed.
em {font-size: 12px;padding: 5px 16px !important;color: #141414;border-radius: 20px;background: #7cccbd;font-style: normal !important;}MARGIN:
Here’s a simple example: let’s say you have some body copy on a page and you want to add extra space (aka margin) around it.
p {margin: 20px;}On Squarespace, you’ll likely only want to apply this CSS to one text block which would look like this:
Tip! Remember you can learn more about finding and targeting block IDs in our other Learn posts.
#BLOCK-ID {margin: 20px;}A more applicable example may be that you want more space under an element:
#BLOCK-ID {margin-bottom: 20px;}You can also force elements to move with negative margins, like this:
#BLOCK-ID {margin-left: -10px;}Another great use of margin in CSS is to center elements:
Tip! This one is truthfully a lot more useful on Squarespace 7.0, but always good to know for general CSS.
#BLOCK-ID {margin-left: auto;margin-right: auto;}