Difference Between Inline and Block Elements CSS


Okay let’s understand what is the difference
between inline and block elements, it’s very important to understand the difference so
we can easily manipulate your HTML file and CSS files. And your website layout in general.
Okay. Inline elements are basically elements that flow, that flows one after each other,
for example, add one p tag and add some text inside, as you can see we can add our span,
which is an in-line element and says this is span and you can see that our text is inside
the text it this text wrap its around, so nothing special, you just add some in-line
elements. For example, let’s add the big is this is an inline element and say this is
big text, and that’s it. Inline elements are elements that are inside the text and the
text flows around them. Okay, let’s move to block elements. Block elements are, for example,
our div is a block element and I will explain on this example. Let’s add to our div some
styling, some styling, I prepare some styles over here in the comment just cut it inside
add some width to be 100 pixels, and the height also, and background color to be white. Just
to add hex code… and now we can see our div element. For example, if you add, we can
add in the span elements, we can add another span element, for example, this is a big text
big, we just copy and paste it and it will be in a line, but if we add another div elements,
just copy this one here, it will go in another line. Just add some margin so we can better
see margin to be up 20 pixels. Okay, so we can see our, our div element so let’s add
another div element. okay, there’s another div element. As you can see the block elements
are one below another and our in-line elements are next to each other. But, we have tricks,
we can just mash up some these things, and just let’s say that are div elements, which
are naturally block elements, let’s say display, display inline, so they act like inline elements.
And what happened? As you can see something is wrong. And that’s because inline elements
don’t support height and width of the elements. Just check this out: if we add to our big,
just say it’s add to our big element, let’s add height for example 100 pixels nothing
happens. Width also 100 pixels nothing happens. Because inline elements don’t support width
and height, but block elements do, so we just need to display these like inline-block.
As you can see now our elements are acting just like in-line elements, just like this
one, and that but there block elements. What will happen if we add to our in-line elements
display to be displayed like a block? They will just fall down ok? I will just add background
color so we can see better. And as you can see we changed to block height in the width
now have a purpose and we had these white background block but if we add inline-block
they will flow next to each other the flow next to each other. So the main difference
between the div and in-line between the block and in-line elements is that in-line in line
with text and block acts as a block and just add display in-line block or display block
to change behavior of that element. So everything can be in-line and everything can be a block
element by just by adding these rule display. And this is it, thank you for watching and
bye-bye.

10 Comments

Add a Comment

Your email address will not be published. Required fields are marked *