Have you ever wondered what the difference between Padding and Margin is in CSS? Here’s a great video that explains Content, Padding, Border & Margin. We even touch on width settings!
Link to W3Schools – Try it yourself!
http://www.w3schools.com/css/tryit.asp?filename=trycss_boxmodel_width
Video Transcript
Hello, Everyone! Welcome to another WordPress Wednesday. My name is Kori Ashton here at WebTegrity. Today we are going to continue our little miniseries on CSS elements and basically how to use them inside WordPress. Today (let’s shrink down), today I want to walk you through the difference between—because sometimes this can get a little confusing—we want to look at the difference between margin, border, padding, and content and how they can all play around and affect each other in different ways.
So, very typically on your website you want to be able to have a little bit of space happening esthetically to let your eye rest. Right? When we learned that in art, we actually learned that you love white space or open spaces. It just allows your eye to rest for a moment, your mind to rest for a moment, and then to move on and get intrigued by the next bit of content that you are finding.
So, it is always nice to have a little bit of breathing space. The way you accomplish that using CSS is through different elements called margin and padding. Basically, they do the same thing. They add space. Where they differ is where they add that space to. Alright? So, here we go.
I am going to use—I think they just do it the best—w3schools.com. If you’ve never been on their website, check it out. More than likely if you have ever Googled, you have probably found them to be a great resource. This isn’t necessarily specifically with WordPress, but their tutorial is pretty fantastic. So, they are using the same image. That is where I got it from.
This is how they explain it, basically the content: The content is the box where the text and images actually appear. So, this is this dotted dot-dot-dot-dot kind of space here. That is where your paragraph is going to sit and maybe your picture is going to sit there, something really nice.
Then the padding: This clears an area around the content and the padding, of course, is always transparent. So, that’s this little space here. If you were to add a border, an actual, visible border or trim around a box of content, you can manipulate the border width but you can also manipulate how far the distance between the border and the actual content would sit. Alright? So, that’s kind of what this is describing here: the border, the padding, and the content.
Then the margin also clears an area outside the border. So, the margin is also transparent. So, there would be this border if you actually wanted one or if you don’t need on, either way. And then this margin kind of takes place to give you spacing between elements. Alright?
So, this is kind of how it would look inside your CSS. You would have a div tag or whatever element you want to be affecting. Okay? And, you would use elements like this: Width, Padding, Border, Margin. Now your width would be how wide you want this entire div class or bit of content to be or how wide you want it to take up this space on your page. Your padding would be that breathing room between your content and your border, and then your border would obviously—if you want one. It doesn’t have to be there. It is not mandatory, but if you wanted one, that would obviously be the visible border around everything that is not transparent. And, then your margin would be the area, again, between your border and maybe the next element on the page.
It is still a little confusing, so here you go. Check this out. Let’s go over here for a second. “Try it yourself.” I am going to put the link to this little tutorial in the description box below so that y’all can come to play with this and try it out. Super cool, pretty fun to play with. (So, I am going to slide over here for a second, shrink down even a little bit more so that I am kind of out of the way.)
I want you to see that this is the style sheet. This is your CSS element happening right here, and this kind of the results—what the end-user would see on the front side of your website. So, you’ve got a little bit of HTML mixed in here. You’ve got this style tag that actually references this being a portion of a style sheet, and then you have your actual rest of your HTML in here, which is the body and the text.
So, we get to see that this is a div class which actually initiates here, right? And so, this inside of your stylesheet affects this inside your website. Does that make sense? Because these correlate. This is a div class and that’s a div class. So, what we want to do here is check out where it says “background-color: lightgrey;”. This is the div for inside this content box; so, it has a light grey background. If you wanted to affect it, you could take that out. Let’s just say we want it to be transparent. See results. Now it’s transparent. We took out the grey, or you can simply just erase the whole element, right? See results, same effect.
Let’s play around now with the width. The width is 300. So, this entire area is 300, and remember we are looking at a content which is this inside area here that is 300px wide. So, let’s affect that. Let’s change it to 400px wide. See results. Check that out. My border did not change; it is still 25px all the way around, but the width of my content changed.
Now let’s look at padding. It has 25px. When there’s one setting like this (25px), CSS automatically applies it to every side of your item. So, it applies it to the top, right, bottom, and to the left of whatever you are trying to affect. So, it applies 25px it to all the way around. If we wanted to see how that could be manipulated, let’s take it down to just 5px; and look how tight we are going to get in here. Oooh, scrunched up! That immediately kind of makes that a little more difficult to even read, but adding that breathing room in it allows your eyes to rest a little bit and immediately just looks cleaner and nicer.
Now let’s play around with that border. Let’s say I don’t like how huge that is. Let’s actually take that number and take it down to 5 and see what that looks like. Now you can see how each one of these elements kind of play and manipulate the spacing.
Now the margin. This should actually be how far this is from the top of your page here; or, if that would be a different paragraph or a different element, you would see this kind of breathe. So, let’s just really affect it and kind of go exaggerated here and say 125px. See results. Wow, why did it move it that way? Why did it move it off to the right? Remember whenever you have one set of numbers here, it affects the top, right, bottom, and left—all the way around. So, let’s say you only wanted to move it down on the top. Are there ways to do that? Absolutely. You can actually write dash top (-top) and tell it then to only affect it on the top part. How cool is that?
You also have the ability to manipulate padding and margin in this way, in a shorthand-type property. So, here you can do it with padding-top, padding-right, padding-bottom and affect them differently. You want the top to have 25 and the right to have 50. Or you could write this—because these numbers are the same for top and bottom and these numbers are the same for right and left—you could write them this way: Padding 25px and then 50px. (The px, of course, stands for pixels, right?) So, if you have two numbers sitting here, the first number affects the top and bottom and the second number affects the right and left. Or you could even write it out—let’s see if they have an example—Let me show you here then. I don’t see that they have an example. Or you can write it out like this: 25px for the top, right? Then maybe we want 10px for the right. It goes in a clockwise (direction); so, it goes top, right, bottom, and left. So, you could do four number settings. It’s 25px for the top, this is for the right, and I want maybe 5px only for the bottom. I want really random so you can see the difference, I want 45px on the left side.
Now, we are affecting padding, right? And padding happens inside my content area. So, I am going to click “see results,” and look at that wonkiness. Now I’ve got 25px on the top, I’ve got 10px over here on the right, I have 5 little bitty pixels on the bottom, and I’ve got this big, gaping kind of indented look here pushing it on the left side 45px in.
How fun is that? Y’all can play around with all sorts of these different features or elements here and play around with the numbers. Again, I am going to put the link in the bottom so that you can click around and play around and try to figure it out visually. Sometimes it takes you actually tinkering yourself, right? Tinkering in there to figure it out yourself. That is what I want to give you the opportunity to do. So, when you click on that little “Try It Yourself,” it just takes you right over here. It has the original settings so you can get into here. You can’t mess anything up. You can’t break it. I hope you have fun with that.
We absolutely want to thank our newest sponsor for our classes: WP Engine. We have classes here for total beginners. We have even gone virtual; so, you are able to take these classes over the internet. They are not canned videos just like this. We don’t do that to you. It’s a live, interactive classroom setting with other students. You are able to raise your hand and ask questions and learn WordPress from total beginner to even advanced level.
I will put our link below so that you can figure out more about our classes. Come to be a part of thing especially if you’re local in San Antonio. We would love to see you in our meet-up groups. We always have cool things going on there that are FREE! Free is always in the budget!
I hope you have a great Wednesday! If you have any questions about your WordPress website, would you consider tweeting us? We would love to do a video just for you. I will see you next WordPress Wednesday. Bye, y’all!
