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

welcome to the 17th tutorial on
beginning CSS today we're gonna look at
the box model and this is where we
really start to have some fun because
you can really start to style your
website using the CSS box model now what
is the CSS box model well if you take a
look at this diagram over here on the
right there are four boxes there's the
content box there is the padding box
there is the border box and there is the
margin box and we're going to talk about
each one of these in this video now the
first box of course is the content box
and we've been using that right that's
where everything goes and we put our
text in there images videos any content
goes within the content box and if we
open up our web page here you can see
that this is in an actual box all of
this text and this paragraph element
would be in a box pretty simple it's
also important to note that every single
element on our web page has these four
boxes around it now these three are
invisible unless we specify them we
haven't yet but the padding is invisible
the border is invisible and the margin
is invisible because we haven't
specified them yet but they are there
they're just transparent think of it
like that but again every single element
will have four boxes around it and the
content is the one we're using right now
so now in order to see the content box
let's go ahead first and specify a
background color and we're going to go
ahead and use a hex code here its 'if
I've e for d7 I actually like that color
for my content boxes so let's go ahead
and save this and we'll open this up now
and there you can see everything that's
inside that color that color that we
just specified is our content box and
yeah it looks like kind of a box isn't
it now you'll notice how close the text
is to the edge of the content box so in
order to increase that and give that a
little space to make it look a little
bit better let's go ahead and add some
padding so we're actually gonna add the
second box now so let's close this out
and we do that with the padding property
you guessed it
and let's give that 20 pixels let's go
ahead and save this and let's open this
up and there you can see we've got more
space now look at that and that looks a
little bit better in my opinion now
let's add a border so let's close this
out again and that'll of course be the
third box on this diagram and to add a
border there are three properties for
that and I actually already typed these
out so I'm just gonna copy and paste
these in here there is border - color
and we're gonna make that black that's
pretty obvious the border with which
we're gonna make 2px and there's the
border style which we're gonna make
solid and in a future video I'll
actually go over all the different
parameters and values we can use for the
border but for now let's go ahead and
save this and let's open this up and you
can see we've got a black border so
we've got our content box right here the
padding which is everything in between
the content box and the border and then
we have the border so we have all three
boxes now you might be asking what is
the margin the margin is this space
right here if you take a look on this
left that's the space between the side
of the page and the border now you might
be asking yourself wait a minute we
didn't specify a margin so how come
there some margin here and the answer to
that is that the browser automatically
adds some margin between the elements
and so that's what the margin is it's
space between the elements and the space
between the edge of the page and your
border and so we can actually play
around with the margin sizes and so
we'll get to that in the next video
you