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

welcome to xx CSS tutorial and so we're
continuing on with the box model and
we're pretty much done with the box
model I just wanted to make a few more
points so let's go ahead and open up our
web page and let's scroll down here and
take a look at our paragraph three
element now the first point I want to
make is that the background color
property only applies to the padding and
content so we can see the content has
the background color and the padding has
the background color but by the time we
get to the border we have to give the
border its own unique color okay so
let's go ahead and close this out and
let's open up our style sheet and let's
go down to paragraph three again now the
second point I want to make is that you
can combine all the padding properties
into one so you remember in the last
video when we specified padding - top
left right we wrote all those individual
properties out you can actually combine
those into one property and so this
right here essentially equals this we're
putting 20 pixels of padding all the way
around the content box so let's go ahead
and copy and paste this over here and so
the way this works is this value equates
to the padding top value this is for the
right this is for the bottom and this is
for the left so let's go ahead and put
in 70 pixels for the left side of the
padding and let's go ahead and save this
and you can see our paragraph now has 70
pixels on the left so think of this like
a shortcut and it really it depends on
how you want to do this
I actually prefer to have all four of
the properties in here because it's
easier for me to read but some people
prefer the shorthand so it's really what
you prefer
so let's actually switch this back to 20
pixels because I only want 20 pixels of
padding around my content now this same
principle also applies to the margin
property so again you don't have to type
out margin - left and margin - top you
can just combine them all into one
property now we can also combine the
border properties so let's go ahead and
do that let's just get rid of this -
color will keep the same parameters
and there you can see we've got this
combined into one property so this
property equals all three of these
properties right here so let's save this
and let's open up our web page and you
can see everything looks the same
they are identical again it's just how
you want to maintain your CSS code I
actually again prefer to have all these
typed out but you may prefer the
shorthand version so let's close this
out now I'm going to show you how to
eliminate margins around your elements
and that's the value right there as you
can see Xero makes a lot of sense right
let's actually take a copy of this style
sheet because I don't want to save these
values that we're going to put in here
so we'll restore this one in a minute so
let's just open this up now and let's go
ahead and set paragraph four to a value
of zero and let's go ahead and save this
let's open up the index page and as you
can see it got rid of all of our margins
but you'll notice that the margin up
here there's still some merging here
between these two elements and the
reason is is our paragraph 3 still has
margin space so we need to get rid of
that as well so let's go back to our
source and let's give paragraph 3 a
margin of zero as well
and we'll save this and there you can
see there is no margin between these two
elements now but you'll notice that
there's still some margin on the side
where is that coming from that is
actually coming from the body element so
let's go ahead and throw up a border
around the body element and we'll just
take this and copy and paste it up into
the body let's save this will open up
the index and there you can see that
margin is outside the body element so
that margin space is part of the body
box model so we want to get rid of that
so all we do is put the margin 0
property in the box element so let's go
ahead and do that
and we'll save this and now you see
we've got no margins whatsoever okay so
let's go back here and I'm actually just
going to delete this now because we
don't want to save this we will restore
the old CSS copy that we had and that is
going to do it for this video in case
you haven't noticed I have been pasting
the source out into the message boards
so I'll do that for this line of code
that we produced today okay I will see
you guys in the next video