Good morning and happy February!! Today I’m continuing the CSS Basics series with a little lesson on margins and padding. Spacing is a huge deal when it comes to creating a clean, user-friendly blog or web design. We already covered letter spacing and line height in the last CSS Basics post. Using the margin and padding attributes allows us to create space within and outside of larger web elements. If you need a refresher on how CSS works, check out the Intro to CSS post.
So, what’s the difference between the margin and padding of an element?
Margin refers to the extra space outside of an element.
Padding refers to the extra space within an element.
Here are some mockup examples of blog elements with and without margins and padding.
Example #1: Navigation Menu (Margins)
Example #2: Sidebar Title with a Background Color (Padding)
It makes a crazy difference, huh? Okay now let’s do some coding! There are a couple of different ways to customize the margin and padding of your web elements. First, find your CSS id or class using the Inspect Element Tool. Then set up your CSS code to look something like this:
.nav-menu-item {
margin-top: 5px;
margin-right: 15px;
margin-bottom: 25px;
margin-left: 10px;
}
(Remember to replace “.nav-menu-item” with your specific element’s class)
The example above works just fine, but you can also speed up the process by including multiple properties on one line.
.nav-menu-item {
margin: 5px 15px 25px 10px;
}
The order is always clockwise so in the example above, margin-top is 5px, margin-right is 15px, margin-bottom is 25px, and margin-left is 10px.
If you’re creating a symmetrical margin setting, you can write your code in an even more simplified line such as this one:
.nav-menu-item {
margin: 5px 15px;
}
In the example above, margin-top and margin-bottom are 5px, and margin-right and margin-left are 15px.
The same exact rules apply when we’re changing the padding of an object.
These attributes are ones I consider when customizing every single element of any blog I design. I hope all of this info is clear and makes sense to you! Ask me any questions in the comments below. Hope you’re having a wonderful Tuesday!