Styling with CSS - Part 10 - Box Model Tutorial Video Lecture - IT & Software

welcome to the w3schools CSS box model
tutorial think of HTML elements as boxes
in CSS box model is used when talking
about layout
it has margins borders padding and
content let's take a look at an example
here's a simple page showing how the box
model works this is our box it's a
development that's been styled to look
like this let's look at the different
areas of the box this area is called the
content it's for text and images appear
I can increase the size of this area by
setting the width property
let's try setting the weight - 400
pixels now the width of the box has
changed but the height as well that's
because we haven't specified height so
the content will take as much space as
it needs a press specifying height
now there's additional space beneath the
text since we specified the height of
the content this area here is called the
padding it clears an area around the
content the padding is always
transparent let's try changing the size
of the padding now I remove the padding
and you can see that the text is
touching the border let's give it some
space again this area is called the
border the border goes around the
padding and the content set the border
to 25 pixels so you can see where it is
but this is a bit much let's try
changing it to 10 pixels that's better
this area is called the margin the
margin Clair's an area around the border
the margin is always transparent let's
try changing the margin size and see
what happens now the box has the lot
less space around it you can go to w/t
schools who's tried editor an experiment
with these values to better understand
how it works
one of the reasons that it's important
to understand the box mode so you can
set the width and height of an element
correctly for all internet browsers it's
important to know that when you set the
width and height of an element you are
in fact setting the width and height of
the content area let's look at an
example to calculate the full size of an
element you must know and correctly set
the padding border and margin this image
is 350 pixels wide the total width of
the box below it is also 350 pixels you
see that the edges of the box line up
with the edges of the image
let's look at the property values the
width property is 320 pixels padding is
10 pixels the border property is 5
pixels and the margin is set to 0 now
looking at these numbers it doesn't seem
like it adds up to 350 pixels but let's
do the math 320 pixels that's the width
property for the content and add 20
pixels that's for left and right padding
at 10 pixels each add 10 pixels that's
for left and right order at 5 pixels
each and cero pixels for the margin now
320 plus 20 plus 10 equals 350 pixels if
we try to change one of these values
like the border you can see that the
edges no longer line up so to sum up the
total width of an element should be
calculated like this width plus left
padding plus right padding plus left
border plus right border plus left
margin plus right margin and the total
height of an element should be
calculated like this height Plus top
padding plus bottom padding plus top
border plus bottom border plus top
margin plus bottom margin this concludes
our tutorial for the CSS box model thank
you for watching