CSS Tutorial for Beginners - 31 - Block and Inline elements Part 2 Video Lecture | Learn CSS: A Comprehensive Tutorial for Web Developers - Front-End Programming

okay we are continuing on with in line
and block elements and in this video
we're going to look at how the box model
relates to each one of these types of
elements and I put the most common block
element here the div block element and
then two of the most common inline
elements the IMG element and the span
element and what I've done is I've given
each of these the same exact attributes
so of course they all have content
rights from here the div has some text
here's the image and here's the span
with some text and then they have the
same exact pixel counts in terms of the
padding and the margin and the same
exact border and of course that
represents our box model right there so
let's make some statements here the
first statement is that both inline and
block elements get padding so we put the
padding in here and as you can see each
one of them has the padding that area
between the border and the text the IMG
element has a two and the span element
has a two so they all get padding no
problem there and as we can see each one
has a nice two pixel black border but
then things start to get a little tricky
with the margins and that's where things
start to get a little bit weird and then
and that's basically what you should
remember is the margin is where things
start to get strange as I said okay so
first I put a 25 pixel margin count and
of course that means it'll go around all
the edges right all the sides will have
25 pixels if you take a look at the div
here it has that right it has it all the
way around so the margin is applied all
the way around for a block element no
problems there where it gets a little
weird is with the inline elements now
take a look at this spin you'll notice
that there's no margin on the top here
there's no margin actually below this
either now you might be getting confused
here you might say wait a minute this
inline looks like it has a margin below
it and this is actually the line right
here this is these guys all three of
these elements are actually on the same
line but you might be asking yourself
wait a minute why does the image have
some margin here 25 pixels of margin on
the bottom and on the top but it's clear
that the inline doesn't you can see
there's no there's nothing there at the
top there's some on the sides but
there's nothing on the top or bottom and
actually there this is I just expanded
out the browser
so so really this is this is how it is I
since you expand out the browser
automatically puts margin in but if I
expand this up here this is the way it
really is now here's how it works the
IMG inline is kind of a strange inline
it kind of acts like a block element in
that it gets a margin all the way around
but the span element only gets a margin
on the sides as you can see here it
plugged in the 25 pixels but it didn't
on the top so that's the difference and
actually the way the span works is the
way most inline elements work the margin
will be applied on the sides on the left
on the right but not on the bottom or
the top
so the inline as I said is a little bit
of a strange element it kind of has
attributes of a block in that the margin
is applied all the way around in the
same way the block element is but
there's yet another subtlety now you may
have noticed that this is 50 pixels and
this is 50 pixels right here but between
these two divs it's only 25 pixels and
you might be asking what's going on with
that
well the inline IMG element adds up both
the margins from both elements and so
it'll take the 25 pixels from this
element that's on top and it'll take the
25 pixels from this elements margin and
tally them up together so that we get 50
pixels a block element does not do that
it will actually cut these in half so
even though both of these block elements
had 25 pixels of margin it'll cut it in
half and therefore we get 25 pixels now
you might ask well what if we had
different margins for these two
different div blocks so let's assume
that div 1 had 100 pixels and div 2 kept
its 25 pixels well it would throw out
the lower margin of the two and take the
higher number so it would be 100 pixels
not 25 pixels okay that's going to do it
for this video I will see you guys in
the next video