CSS Tutorial for Beginners - 18 - CSS Box Model Part 2 Video Lecture | Learn CSS: A Comprehensive Tutorial for Web Developers - Front-End Programming

welcome to the 18th tutorial on
beginning CSS in the last video we dealt
with the CSS box model and we're going
to continue on with that subject now of
course we talked about the four boxes
there was the content which is right in
here
there was the padding which is the area
between the text and the border and then
there was a border and that's this black
border we created here and then there
was the margin now we didn't specify a
margin but as I said the browser creates
a little bit of margin on the outside so
that's what this is right here between
the edge of the browser and the edge of
our border so let's go ahead and close
this now and we're going to edit the
stylesheet a little bit actually sorry
we're going to edit the HTML source
first so let's open that up and let's
maximize this so what we want to do here
is we're going to actually duplicate
this class so we're going to make a pair
of four here or I call this pair of four
and let's go ahead and save that and now
let's open up our style sheet and we're
going to go ahead and copy and paste and
create our class here and we're going to
call this pair of four of course and
let's change the color of this to black
so they're a little bit different we'll
keep everything else the same for now
let's save this and we'll open up our
web page again and there you can see now
we've got two paragraphs that stand out
very nicely on our web page now we're
going to go ahead and start to work with
margins now let's say for this second
paragraph that we create we want a
little bit more margin we want a little
bit more space here between the edge of
the page and our element so let's go
ahead and close this out now and let's
go down here and so we're just going to
specify margin and we're going to give
this 20 pixels whoops and let's go ahead
and save this there you can see we have
20 pixels of margin now create some
extra space around our element okay so
that's one thing you can do now let's
say you want to create some margin here
at the
hop and you want a little bit more room
between these two elements and remember
these are boxes every element in the
webpage has a box system around it and
that's what we talked about the last
video of course but let's say we want to
create some space here between these two
elements so let's go let's close this
out and this is where we're going to use
some of these parameters over here so
let's go ahead and specify margin - top
and we'll give this 50 pixels of space
and let's save this and let's go here
and there you can see we've got more
space now between these two elements so
you guys get the idea here
you can move any of these elements
around where you specifically want them
on your webpage that's what these
properties do they allow you to get very
specific so you can control where
everything goes on your web page and
that's really the beauty of the CSS box
model okay so let's say we really want
to get drastic here and let's open up
our web page again let's say we want to
put this element all the way we want
this over on the right we want we're
going to put a picture here or something
eventually so let's say we want to put
this element all the way to the right so
let's let's actually close this out and
now let's go ahead and put in margin
- left let's give this a big number
because we're gonna have to move this a
long ways let's say this is 400 pixels
we're going to move this 400 pixels we
open this up and there you can see we've
moved this over now and maybe we would
put a menu here or something or some
sort of picture so let's go ahead and
close this out now the same properties
that we are using here in margin are
also the same property types for padding
so let's go ahead and play around with
this a little bit let's add a padding
left property and let's go ahead and add
40 pixels to that and we'll save this
will open this up again and there you
can see we've got some extra space here
as opposed to this side and so that's
how that works okay let's go ahead and
actually let's not keep that let's go
ahead and get rid of that will save our
stylesheet
so you guys can play around with these
parameters and moving elements around
and go ahead and play around these
yourself now there is one final thing I
want to point out the box model as I
said in the last video is in every
single element every one of these
elements has a box around it we could
actually put a border around the body in
fact let's do that let's go ahead and
copy and paste the border from our
paragraph into the body and let's make
this so this stands out we'll make this
four pixels and then let's go ahead and
type in aqua marine that's a color again
we can use I spelled it wrong there we
go let's save this if we open this up
there you can see it actually there's
the box and you can see the margin that
the browser actually adds outside of it
right this is the extra margin that goes
around our entire web page and so you
see how the box model actually contains
everything look how close it is here
this extra margin as I said is headed by
the browser so that's one thing you can
do if you want to see how the boxes are
aligned in your web page you can just
add a temporary border to see how
everything's lining up that's one good
way to do this okay and let's actually
remove that we're not going to keep that
so we'll get rid of that and now we'll
do a save okay that is going to do it
for this video I will see you guys in
the next video we will continue on in
the next video with the box model and
we're actually going to work against an
image so we'll change the content from
text and we'll actually put an image and
use the box model
and put a border around the image some
extra goodies okay I will see you guys
in the next video