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

welcome to the 30th video on beginning
CSS and part 2 of the series now part 1
compromised the first 29 videos and so
if you've gotten this far
congratulations you now have a very good
understanding on how to style HTML
elements but now we're going to take the
next step and what does that involve
well that involves positioning our
elements now we've kind of looked at
that briefly but now we're going to
expand our view of positioning elements
and that is how elements relate to each
other and so we're going to spend the
next five to six videos looking at
positioning now in this video we're
going to take a look at block and inline
elements and the difference between
those two types then we will take a look
at floating elements then absolute
positioning and then finally fixed
positioning and by the end of this
you'll know exactly how to place your
elements where you want them on your web
page and then once we're done with that
we're going to take everything that
we've learned from part 1 and part 2 and
start putting together some really
awesome professional-looking layouts so
let's take a look at what our block and
inline elements and we're going to take
a break from coding we've kind of been
working on that web page in the first 29
tutorials but in this one I created a
special US web page now obviously this
isn't a web page that we would do in
reality but I really wanted block
elements and inline elements to stand
out for you because I want you to
understand the concept so don't worry
about coding you can just sit back and
enjoy the show and again it's just
important to understand the concept of
an inline and a block element and
actually we've been using them all along
but since we're going to start talking
about positioning and how elements are
rendered in the browser it's very
important that first you understand what
a block and an inline element is so
we've got this web page that I've made
here again to show the concepts and then
here's of course the HTML and here is
the style sheet now let's start first
with a block element now elements are
divided into two very basic types you
guessed it a block element and an inline
element let's start first with a
böck element now we've been dealing with
block elements the header is a block
element the paragraph HTML element is a
block element the div element is a block
element so we've been dealing with them
now a block element is a major
structural element and it extends all
the way from the left to the right side
of the page the browser will paint this
block element all the way from the left
to the right and since we have no width
in here if you take a look at this
header one element it is stretched all
the way from the left to the right and
what's nice about this is if I expand
this out it will keep the element
correctly sized and here's the important
point the block element takes up its own
space all the way from the left to the
right it doesn't share it and you can
see our block element right here here's
the h1 the browser came down found this
h1 element and it painted it first here
and then it hit a second block element
and painted the paragraph right here
because the paragraph is a block element
so it too will be painted all the way
from the left to the right because we
didn't put a width now let's say we
decided to go ahead and put a width in
here and let's do that and then let's
save this and we will refresh this you
can see now that it cuts it off and
you'll see that it starts from the left
and move to the right and if I expand
this out you can see that the paragraph
element still continues to expand but
the header block element does not
because we said this is only 300 pixels
and again elements whether they're block
or inline actually always start from the
left to the right now we could actually
plant this to the right and that
involves positioning we'll get to that
in the next several videos so let's go
ahead and put this back and let's get
rid of the width because we want
everything to naturally expand and let's
save this and we'll hit this refresh and
there you can see it naturally expands
all the way so again it paints the first
block element and then there is a line
break which is right here and then it
will paint the second block element and
again I didn't put widths in any of
these block elements so they will all
naturally expand now this is also
referred to as the flow and that is when
we don't interrupt
anything that is when we don't put any
with or we don't try to position this
element the browser will just naturally
expand that element out and that is
actually not a bad way to do things when
you can actually use the natural flow of
CSS that is actually the preferred way
to do it now that won't always be the
case in fact you know we may have a div
section that we need to have as a
sidebar which will take up just an area
of half the screen then we need to start
putting in widths and absolute positions
and we'll get to that in future videos
but whenever you let the browser do the
work and let it naturally fill in you
always get the most reliable results
doing that so again whenever you can do
that that's a good way to have your
element rendered so again we paint the
first block element and a line break is
put in here and then it came down and it
found the paragraph and there was no
width so it again it expanded this all
the way to the end of the screen it
found the third block and painted this
element and the key here look at this
it's top down so they're not put
side-by-side and once again there's a
line break and then the next block
element is rendered and now there's
another line break and then the next
block element is rendered it's done in a
top-down manner now let's go down to
this div to now this is another block
element but you want to notice something
in here I nested a P element inside this
div element but look at this they're
both block elements so the paragraph is
also rendered all the way to the end the
screen it doesn't change the fact that
it's a block element the fact that the
paragraph is inside the div it will be
expanded all the way out you can see
that and so that's the other important
point I want to make you can nest block
elements inside block elements and
that's why I put this border around here
so you could see this this thing expands
all the way to the end even though it's
inside the div to the paragraph itself
is a block element and it too will
expand all the way to the end because I
didn't put any widths in any of these
elements so you can see how this works
and take a look a line break was was
created here and another paragraph was
placed in here and it expanded out too
so it's the same concept even when you
nest block elements inside block
elements so keep that in mind okay so
now I think you have a pretty good
understanding of what
elements do actually you're going to
understand them even better when we look
at in line now in line elements are span
elements which we dealt with a few
videos ago and images
that's actually a in line element now
here's the first one that we hit down
here and let's actually go I think I've
placed them right here now I want you to
look at this very closely and I hope you
like my little quote here that says I'm
in line these are stacked side by side
take a look at that that's the major
difference between an inline element and
a block a block as we said expands all
the way to the end but the inline
element does not it will actually size
accordingly to the content so this first
one is the size of the picture this
second one is the size of the picture
and once it's done it'll just stack the
next one right by it side by side it
does not go top-down now you might ask
well why is this image below this image
over here well it ran out of space so
it'll start on the left and then work
its way to the right kind of the way a
block element does the only difference
like I said it will stack the inline
elements side by side by side and you
can see that now if we go down here
these pictures are actually outside of
this div three block element but still
the same concept right they're side by
side by side take a look at that and
they'll keep going as long as they can
fit everything in now if I expand this
out suddenly there's enough space and
it'll put these images in here so you
see how that works too if I expand the
browser window out everything can fit in
but as soon as I start minimizing it it
has to start the second image on a new
line so that's how that works and of
course everything gets the box model
still right that we talked about and if
we take a look at the span it does
exactly the same thing as the image it
also is stacked side by side by side and
let's put a few more in here and you'll
see it'll just keep stacking them side
by side until it runs out of space it'll
hit the next line so if we hit refresh
here you can see here that these are
given a new line because we didn't have
enough space right here now another good
way to think of the difference between
inline and block is that look at the
spin it's kind of covering the area of
the text or the covering the area of the
image whereas the block element is a
major structural element it expands
all the way to the end of the page so
that's one good way to look at the
difference between an inline element and
a block element so I think you guys have
a good initial understanding of the
difference between a block and an inline
element however there are some subtle
nuances to this concept and we will get
to that in the next video when we
continue on with the block and the
inline element