Welcome to another HTML and CSS tutorial and how to set margins in Notepad. What this allows they basically allow us to do is give us extra breathing room around our divs or images.
So first is margins this will give you breathing room outside of your div and then padding’s it will do next is it’ll give you breathing room inside your div.
First, we need to do is creating a div just a normal div like that nothing fancy and then we’re going to give us some basic styles so a background color. Which is so that’s green we’re going to settle bits to 200 pixels and a height to 200 pixels just so that Sibley then a color to white because later on when we go cons padding we’ll put text inside so right now if I run this in chrome you see I’ve got the square it’s green and it’s 200 by 200 wide and higher so what about it. We want to if I run it again if we want to add space around the edges now you can see that the browser automatically puts a couple of pixels on left and on the top and that is just to make it clear present properly I just like master that’s what the noise was is this is just to make it present nicely later on in the series we’ll look at how to remove that or change that size.Now we’re going to be looking at changing the margins of a div so say we want extra space here the whitespace we want that to be bigger this is very simple in CSS we just set a margin. We could set it to 50 pixels let’s say and if we launch it in chrome it’s doing 50 pixels around each side so each side the top right bottom and left have 50 pixels around what about if we wanted the top to be 50 the right to be 30 the bottom to be 20. Less to be something so fifty we just did fifty pixels space 30 pixels think I said a caramel WA and 20 pixels then ten pixels so top right bottom left the easiest way to think of this is like a clock that goes from top at 12 o’clock to 3 to right at 3 o’clock the bottom at 6 o’clock and the left to 9 o’clock.How it works with CSS, the same also applies to panes which we’ll come to in a moment. What about if we want to style just the top now we can do it margin – top and set it equal to 50 pixels. If we run that you see we just got the space on the top and if you haven’t already guessed you do leave or right or bottom just like that all of them ballpark also if you want the left and right to be the same and the top and bottom to be the same. We can just do a hundred pixels for the top and bottom there are 50 pixels for the left and right and as the same thing obviously here we can only see the top and the left now what about if we want extra space inside this box so I’m gonna remove my margin here I were just going to put some text inside this div. I defer hello world save, it chrome you see what is texting hello world but is right against the edge of this box. we want some breathing space to make that look nicer so we’re going to add some extra space to the outside of this box. So if we add padding of 20 pixels this is going to make the box 20 pixels bigger on the right and 20 pixels on the left 20 pixels on top and on the bottom so basically it’s going to be 240 by 240.Now since we’re adding 20 pixels for left right top and bottom if we run. Now in chrome, you see where this extra breathing room it looks presented much nicely what about if we just want to set the top or the bottom of everything it’s the same as margins.
We did 20 pixels 50 pixels 10 pixels and 80 pixels let’s say save that running Chrome and see what all sorts of weird of padding. That is pretty much-mourning margins and padding’s in CSS I’ll be showing you how to get rid of that margin around the around the browser but that’s it for this tutorial so thanks.