XHTML and CSS Tutorial - 23 - Margin Video Lecture | Learn Website Designing with XHTML and CSS - Software Development

alright guys welcome to your last story
on the CSS box model and the last
element that we have to cover is the
margin now the margin is the area
outside the border and outside the
padding it's the area basically that
surrounds the entire element so let's go
ahead and let's go ahead and actually
make some paragraphs they'll probably
the easiest to see
so paragraphs actually have margin by
default one of the few elements so this
is a paragraph make sure you spell that
Wow I was pretty close actually so
anyways let's go ahead and paste that
and actually we probably should add a
background color so P background color
and just make it orange or something
nothing too light
nothing too dark just right and I'm
talking about Warren J and check it out
this is Africa afta and this is AB
crafte so as you can see by default it
has probably mono how how tall is my
mouse cursor probably like 10 or 15
pixels or something so by default
paragraphs have a margin between them
but whatever saying all right I wrote
this sweet article and I hate I made it
into a couple paragraphs but I either
think it's too much or I want to tighten
the paragraphs up so they're closer
together well in order to do this you
need to play with the property called
margin now the margin like I said is a
space around each of these paragraphs so
let's go ahead and do that right now
just like the the padding that's what I
was trying to think of you can either
play with margin in one of two ways you
can either change your overall or you
can change it individually so let's go
ahead and the first thing I want to do
is show you guys how to tighten up your
paragraph so if you want to tighten it
up to like one pixel just like that if
you set margin a one pixel on your
paragraphs it goes from the default
which is I'm gonna say it's like 10
pixels by default and it refreshes it
you now have a one pixel of space in
between
your paragraphs so that is a way to
tighten up you can even even set it to
zero if you want but then it wouldn't
even be a paragraph at all it would just
be like a line break so anyways that is
how you would do that now if you want to
space it out even more I think it's like
10 or 15 by default so let's really
stretch it out to like 40 pixels and you
can either do that and now when you
press refresh each of your paragraphs
has 40 pixels surrounding it so I mean
if you're going for that effect then
that is what you do and what I want you
to take notice of is that the padding
does not change the padding and the
boarder are staying the same
it's the margin around it that is
changing so that's the difference
between the padding and the margin a lot
of people get this confused
just remember padding is inside the
boarder margin is outside the border and
you'll be fine you'll be way ahead of
everyone else they'll be lost in the
dark because they read books instead of
watching my tutorials those idiots
so like I said way before you can change
margin in one of two ways you can either
change your overall or I'm not even
going to go through this you can change
it one side it's I'm like margin-top
spell that wrong top margin bottom
margin right and margin left so I don't
want to go through each one and show you
because it's obvious just like padding
what it does but anyways that is the
difference between margins and padding
and borders and overall that's called
the CSS box model how you can play with
different areas of an element basically
so anyways now you understand the CSS
box model we're ready to move on to
another topic so anyways thank you guys
for watching don't forget subscribe if
you have any questions just ask me on my
forum and if I see it I'll answer if not
trust me there's a 8,000 people willing
to answer your questions for you so
anyways one last time thanks for
watching don't forget subscribe and I'll
see you next video