Up next in 10
CSS Tutorial For Beginners 37 - Margins
10K views
Feb 7, 2024
In this CSS tutorial tailored for beginners, viewers delve into the concept of margins, an essential aspect of controlling spacing and layout in web development. The video likely covers how to use CSS properties such as margin to adjust the space around elements, allowing for precise control over their positioning and alignment within a webpage. Viewers can expect to learn about different ways to specify margins, including setting margins individually for each side of an element or using shorthand notation to define margins for all sides simultaneously. Practical examples and demonstrations may be included to illustrate the application of margin properties in CSS styling. This tutorial serves as a valuable resource for beginners seeking to improve the layout and spacing of their web pages using CSS.
View Video Transcript
0:00
Yo guys what the hell is going on? This is CSF's beginners lesson 37 and today we're
0:12
going to talk all about margins. That's coming up. Okay so first of all let's
0:17
just have a recap of what the box model is. We said that we've got our element here in the middle, which is given a specific width and height. Then around
0:23
that we have some padding which is the internal spacing within the element itself. Then we can have a border if we wish and then finally the space that
0:31
separates it from other elements is the margin around the perimeter of the
0:35
element itself. So we're going to look at the margin in more detail in this video
0:40
and we're going to jump back into the code to do that. Alright guys so here I
0:44
am back in the code and it's exactly the same as last time. We've got these two
0:48
div tags here both with a class of box and this content in between and then
0:52
we've started them here with a class selector of box. We've given each one a
0:56
margin of 30 pixels, a padding of 30 pixels and a one pixel solid border
1:00
which is black. So let's just view this again in a browser and see what's going
1:05
on. Alright so there it is and this here is the content and we've got some
1:12
padding here around the content border and then the margin between the two
1:15
elements. Let's just inspect the element in Google DevTools and we can see there
1:20
the orange which is what we're going to be looking at today is the margin
1:24
And we specified margin 30 pixels and that says hey browser I just specified
1:28
one value so that means apply this value to the top right bottom and left side of
1:34
the element. So it's giving the margin all around the element. Now what if
1:38
we wanted to control the top differently or the right differently or the bottom differently or the left differently? Well we can do that we can specify a value
1:45
for each one. And let's have a look how we do that. So right here we've
1:51
given one value and that applies the margin to all sides of the element
1:55
If we wanted to give each side a different value we can do that by
1:59
specifying full values. So I'll just write these first of all okay and then
2:06
I'll go through it. So what we're saying here is we start at the top the first value is the top and we work clockwise around the element. So we're saying the
2:14
top here is 30 pixels we want the margin to be 30 pixels. On the right which is
2:18
next around in the clock we want it to be 20 pixels give it a right margin of 20 pixels. And then at the bottom we want a 15 pixel margin and then on the left a
2:27
5 pixel margin. Okay that makes sense so that's how we're controlling each
2:30
individual side margin. So let's see in a browser what's happened. Okay we can't
2:38
really see there because not much has changed but if we right-click this now
2:41
and inspect in the element there we go you can see now the the top one is 30
2:46
pixels. Okay the right one bit smaller 20 pixels bottom one a little bit
2:51
smaller again 15 pixels and the left one is very small that's the 5 pixel margin
2:56
And it even says that here you see in the the bottom right hand corner of
3:00
Google Chrome tools we've got the margin values here says it around the perimeter
3:05
Okay so that's how we control each one individually. Now there's other ways
3:09
there's other shorthand ways we can do this. Say we want the top and bottom to
3:13
be 30 pixels and we want the right and left to be 15 pixels. Well we can do that
3:18
We can do it by specifying two values and that there my friends is saying okay
3:22
give the top and bottom a value of 30 pixels and the left and right a value of
3:26
15 pixels. So let's just make sure this has worked and view it in a browser once
3:30
again and inspect the element. And cool there we go guys you can see now the
3:39
left and right the same and the top and bottom are the same and again it shows the exact values here in DevTools. Alright so that's pretty cool now
3:47
there's one more shorthand we can do and I don't use this one often but you can
3:52
use it if you like. If we add a third value what we're saying now is we want
3:57
the top to be 30 pixels we want the right to be 15 pixels we want the bottom
4:02
to be 20 pixels and because there's not a fourth parameter or a fourth value
4:06
specified it's getting to the left and it doesn't know what that is so it says hey well I've got one for the right which is 15 pixels so I'm just going to
4:14
match that so the left will automatically match this 15 pixels so
4:18
essentially this is top left and right and bottom okay so that's the last
4:24
shorthand method we can use so let's just view this once more in a browser
4:28
make sure it's worked inspect the element and yep there it is you can see
4:35
here 30 pixels 15 pixels 20 pixels and 15 pixels again so the left and right
4:40
match each other right okay then so in the last lesson I talked about the
4:48
margin collapse okay so let's just go back to the code for a second and I'm
4:52
going to just say 30 pixels all around so top bottom left and right they're all
4:56
going to have 30 pixels margin then we'll view this again in a browser and
5:03
inspect the element so I said in the last lesson that we've got this
5:09
property sorry this element here which has a margin bottom of 30 pixels and
5:13
then this one here which has a margin top of 30 pixels now the margin between
5:18
them is only 30 pixels but you would think it would be 60 pixels right
5:22
because we've got a margin top of 30 and a margin bottom of 30 so they should add
5:27
up and give you 60 pixels right well no that's not the way that CSS works in
5:31
browsers and this is called the vertical margin collapse okay so essentially when you have two elements stacked on top of each other and they
5:39
both have a margin associated with it one a margin on the bottom and one a
5:42
margin on the top then those two margins collapse when they meet each other so if
5:48
those margins are identical which they are in this case they're both 30 pixels
5:51
then they collapse and they become 30 pixels in total the margin between the
5:56
two and if we have one margin larger than the other then they collapse and it
6:01
will take the larger of the two margins so let's just change this to 15 pixels
6:09
15 pixels 15 pixels so what we're saying there is we want a 30 pixel top margin
6:15
15 right 15 bottom and 15 down however the space between these is still 30
6:21
pixels you see that one there is 15 pixels at the bottom but this is still 30 pixels at the top so when the margins collapse is still accepting that larger
6:30
value of 30 pixels okay now you might think this is counterintuitive but
6:35
you're just gonna have to accept that that's the way that CSS works in browsers and there are reasons for it for example if you didn't start p tags
6:43
and you display them normally in a browser if the margins didn't collapse
6:48
them between every p tag there's going to be a humongous gap and that's going to look a bit silly so it's there to help you out and you can get around it
6:54
you know it's not easy to and so it's not hard to to kind of combat this so
7:00
we've looked at the shorthand methods and we've looked at the margin collapse
7:04
what we're going to look at now is just a couple of nifty techniques that I use
7:08
sometimes okay now say we want this box to be oops I've got rid of the border
7:14
there say we want this box to be a width of I don't know 300 pixels right let's
7:22
just view that in a browser let's see what happens okay cool so the box is
7:30
300 pixels but you might think well actually I want this box to be central
7:33
so I want to specify left and right margins which is going to bring this box
7:38
to the center here but I don't actually know what those margins should be okay I
7:44
don't know the width of this container for some reason or other or when the
7:49
browser shrinks then the container is going to shrink as well so we want those boxes regardless of how big this container is to sit in the middle now
7:56
how do I do that well that is where the margin auto property comes in so let's
8:01
take a look at that we saw before that we can have two values like this and
8:07
then this would be the top and bottom margin and this the left and right okay
8:11
now we want the left and right to be made up so that it centers the the boxes
8:17
so we'd use auto because we don't know what that margin should be and what auto
8:21
is saying okay is give the left and right margins a property which is
8:27
automatic work out an automatic property for me which is going to sit this box in
8:32
the middle so let's save that and view it in the browser make sure it does and
8:39
cool there we go so we'll right click this inspect the element and now you can
8:44
see it's given those left and right margins an automatic value which is
8:49
equal and sits the content in the middle okay so that's really cool technique I
8:53
use that all the time and there's one more thing I want to show you and that's
8:57
percentages so say we have a width of 50% yeah now again we want it to sit in the
9:03
middle and we know that if the width is 50% then there's 50% room left so we can
9:09
have a 25% margin okay for this to work we need to get rid of the padding because
9:16
remember the padding is all part of the box model in fact no I won't get rid of
9:21
that it won't make much of it anyway there we go so we're saying we want this
9:24
width of 50% to sit in the middle then on each side there's going to be a margin of 25% so we can work with percentages in margins as well that's
9:32
absolutely fine so let's view this in a browser once again cool and there you
9:40
can see still sitting in the middle is 50% the width but if we shrink the
9:43
browser now this doesn't work okay I've not made this a percentage value so it
9:49
won't work in this case but generally speaking this is a good way of kind of
9:53
controlling the width of elements positioning them in the middle and they'll scale down for responsive websites too that's a little bit
10:00
advanced so I'm not going to go into it in this chapter now or this video rather I may do a series on responsive design in the future you can check that out
10:07
then so that's about it for margin if you have any questions feel free to drop
10:13
a comment below I'll answer all of those otherwise if you enjoyed these videos
10:17
please like them subscribe or share them and I'll see you guys in the next one
10:21
where we're going to look at padding
#Physics
#Programming
#Software
#Web Design & Development
#Web Services