Video Summary
Alright guys, so for this example, I’m going to go over how we can manipulate padding. And it’s basically the space with inside the border. So we only have one paragraph for this example, just because we because we don’t need the extra clutter and we’ll be able to actually, you know, visualize and isolate what spacing we’re using, between this base of the tax that we have, and this border that we have so right now I just have a two pixels solid blue border, and we’re going to want to create more spacing because if we don’t, I don’t really like how this this tax rate here is so close to this border, right? It doesn’t really look good. It looks like you’re forcing that. We want to create a little bit of spacing with that. So let’s just try and do padding. And let’s do 20 pixels. And I need to make this a colon and semicolon. All right. So now we recreated this nice little space all the way around. Now you might look over here and say well, there’s a lot more spacing than the top and the bottom. That will happen from time to time because basically, what you’re thinking about like a Word document you’re typing that not every word is going to fit perfectly right to the end and then go down. Right, so stylings right here was just too long. So it got put to the next line. And CSS stylings was too long got put to the next slide. So that’s why you see a little bit more space here. But in actuality, there is a nice warning 20 pixel, like padding or spacing from the text and the border. So now let’s say we want to have a little bit more spacing on the top. So we’re gonna go padding top.
All right, that doesn’t look too bad. We got to do some spacing here. So basically, that’s how we’re able to create the spacing between the border and your text or you know, and you can have patterns on images you can have patterns on, you know divs you can have patterns on h tags or H tags, a tags, Buttons.
Basically, you can anything, any element you can create a padding for but the best way to really visualize this as using the p tag, the paragraph tag. So let’s just say you’re gonna run this from time to time, and we’re gonna have 20 pixels, but maybe you want, maybe you like how the padding from top to bottom is maybe left to write. You want that a little bit tighter. So let’s do 100 pixels.
Right, so now we have 100 pixels from the left and right side but we still kept the padding from top to bottom as 20. So this is the shorthand version of doing top and bottom left and right very rarely, but once in a while, you’ll get into a pattern situation where you are using the you’re using the shorthand version for every side. So instead of sort of actually doing a new one, let’s just test this out and let’s do 50 pixels and new 10 pixels.
Right, so So we set this up so that each individual section has its own side. So if you come back to here, the first one is the top we have 10 second ones the bottom we have right right so we have 100 pixels over here.
The bottom has got 50 pixels and the left has 10 pixels. Right? And also to is if you ever wonder if you’re if you’re playing around with this and you ever wonder what side am I working on, because I’ve been a developer for five years now. And I still forget which ones which so what I’ll do is I’ll go here and I’ll make this 200 to go okay, that was definitely the top. Alright, which one was this one? Let’s do 500 Or that one was definitely the bottom. You know, what happens if I do 1000?
Right. Okay, that one was definitely the right side. What happens if I do 100 Right here, or that one was done in the left? So that’s the way you can kind of just, you know, you can type it out and play with it and that way you know exactly what you want. So that way you’re not having to type out padding, left padding, right padding bottom padding top and then have to do you know typing all those elements, but when you’re first starting off and if it makes it easier for you to set it up that way, by all means. This is you’re going to be the one developing your site, you’re only the one working on the site. so whatever is going to be easiest for you. Long term or short term, just go with the flow, all of them, All of them, complete the state or give you the same result and be able to complete the way that you want to. So don’t be afraid to experiment and try things out.
With that being said, I think we’re gonna hop over to margins, which is basically the outside of the border and how we can manipulate those.