CSS Tutorial for Beginners - 45 - The inline-block Video Lecture | Learn CSS: A Comprehensive Tutorial for Web Developers - Front-End Programming

I've had numerous requests to talk about
in line - block and of course that is
one of the values that you can set the
display property - and people want to
know what the difference is between the
in line - block and the difference
between just regular inline and regular
block so what I've done here is I've
created three separate pages that
contain initially at least exactly the
same code you can see we're setting it
initially to inline all three of these
and then eventually we'll flip these but
for now we're just going to keep them
all the same and we're using the same
exact text so we've set up a span now
remember a span is a true inline element
that is we have no height and we have no
width we get none of that with an inline
element even though I've set it to here
you can see that it's ignored we don't
have any height here because this is a
true inline element ASP in our span is
right here and you'll remember it will
expand out to the width and height of
the text in this case text - Rita so
we'll simply cover that area it will
ignore any height or even with if we put
a width in here that would be ignored as
well so now what we're going to do is
flip this to block down here and let's
see what happens and we'll hit refresh
and there you can see now this is a
block element did you see what happen
here we got a new line because remember
block elements go top down not side by
side by side so we get a line break and
it created a line break right after more
right because the span element has now
been converted to a block element so it
gets its own complete line all by itself
you'll notice now that the height
property that we put in here is now
recognized the browser recognizes it
because it's a block element it also
expanded to the entire width of the page
now if we put a width of 50 pixels in
here it would just cut it off at 50
pixels now let's set this page to inline
- block and we'll see what happens
and we'll hit refresh and take a look
what happen here it's kind of a best of
both worlds I like to think of this as a
hybrid it's kind of half in line in half
block you'll notice that we didn't get a
new line break like we did when we set
this to pure block so that is acting
more like an inline but it did recognize
the height so we did get that fifty
pixels of height so that's what an
inline block is it's just half and half
it has some characteristics of an inline
and it has some characteristics of a
block it's not totally a block it's not
totally an inline in other words it's
not totally a block because we didn't
get a new line break as we did down here
with a pure block setting but it's not
pure inline either in that it's obeying
our height property which we set 250
pixels now you could also put a width in
here and it would also pay attention to
that as well
so that's really what the inline block
is it does a little bit of inline and it
does a little bit of block so again it's
kind of a best of both worlds we don't
get a new line break which of course is
a classic inline remember it's side by
side by side we don't get a new line
break like we do with a block but this
value does actually recognize our height
that we set which is 50 pixels so that's
how it works okay see you guys in the
next video