There are two spacing properities that can be used with CSS for your web design. You can use MARGIN and / or PADDING. So when should you use them? In this tutorial we will be discussing CSS spacing, and the difference between margin and padding.
Understanding CSS Spacing
Margin and padding are two ways we can space out the elements in our web design. Sometimes these properties can be confused, but they actually do very different things, and space things quite differently.
Margin allows for space OUTSIDE the border of an element, whereas padding adds space INSIDE the element’s border. Both of these are coded separatley.
Marging and Padding are the two most commonly used properties for spacing out elements in your web design.
What is the difference between the two??
Margins In CSS
Lets start with Margin first. The margin property defines the space around elements. Margin is outside the border of each element.
The margin area is always completely transparent, it cannot have a background color.
The top, right, bottom, and left margin can all be changed independently, using separate properties.
As I have talked about before in one of my other tutorials, Learning CSS Code Part 4—Understanding The Four Side Elements, we learned how we can control top, right, bottom and left, we learned how we can control each of the four sides differently. Well that can definately be used here when we talk margin.
So your left margin doesn’t have to be the same as your bottom margin, and the same with all the other ones. They can be the same or you can control them differently.
Padding In CSS
Now, lets take a look at what padding is. The padding property defines the space between the element border and the element content. Padding is inside the border of each element.
The padding area is affected by the background color of the element. Margin was totally transparent, you cannot set the background color for margin. Padding is now taking on the color of the content of the element. Or whatever background the content of the element is, that is the color background that the padding will will take on.
The top, right, bottom, and left padding can be changed independently using separate properties.
So now lets show you an example to help make this clear for you.
Lets start with your content. This here can be absoultely any element in your design. This could be content text, it could be headings, it could be images, it could be sidebar widgets. Any element that we are going to be controlling within our CSS file, that is anything, is our content.
So using this image above, the inner most box is the content. As we move from the center you will notice the solid blue line is the border. This can be anything, it could be a line at the top, at the bottom, we can control all sides of the border independently, just I am showing you a nice thick border here to give you an idea to explain the padding verses margin.
In between the border and the content is the padding. You can see it is separating the content from the border.
Let say that the content is all of our text, the main body text of the site. You probably don’t want to have you text touching right up against the border. You really want to have some white space between the content and the border. That is what the padding is controlling.
Ok, now margin is outside to the border. Lets say we don’t want our content touching our next box, so we want to have some space between all of the elements in our design, now we are talking margin. It is going to give you space around our border before the next element.
Coding Margin And Padding With CSS
So how are we going to code all of this??
Here is our same example as before with the coding added. You see we start with our content, then we have padding, a border and then margin. So let me explain that in our code.
The example that I am using here is the sidebar widget. So first I am going to style my content. I have my font-family and my font-size, so I have styled my content. Now I am going to add some padding around my content, and I just chose 10px. Then I added in a border around the padding, of 3px solid with a color of #26c6eb; which is a blue color. Then I have the margin all around the whole thing at 10px. Notice I only used one size to style all four sides of the margin. Now I close it with the closing bracket.
Margins And Padding In Your Designs
Now, you don’t need to have margin and padding for ever single element. Its not necessary. Just play around with it and see how you like it in your design. But it is an option that is available to you if you want to use it.
So go ahead and play with this in your design. This is really the only way you will be able to tell if you need to use padding, margin or both in your design.
What paddings and margins will you use in your design?? Will your use one or both, or none??
Ending Of Learn CSS Tutorial Series
This was my last tutorial in my series on Learning CSS. Thanks for reading my tutorials on CSS and I hope they gave you a basic understanding of CSS so that you will be able to use these tips in your web design. See these other tutorials in the series:
- Learning CSS Code Part 1-Writing With CSS
- Learning CSS Code Part 2-Coding Color With CSS
- Learning CSS Code Part 3-Coding Size With CSS
- Learning CSS Code Part 4-Understanding The Four Side Elements
- Learning CSS Code Part 5-Coding Borders with CSS
- Learning CSS Code Part 6-Coding Backgrounds with CSS
- Learning CSS Code Part 7-Coding Fonts with CSS
Latest posts by Robin McDonald (see all)
- Optimize Your WordPress Images With ShortPixel - January 15, 2018
- How To Increase Your SEO By Adding Keywords And Meta Descriptions In WordPress Posts And Pages - November 20, 2017
- Uninstalling a WordPress Plugin And Why Its Important - October 30, 2017