Grow your business, income, & life.

Behind-the-scenes training to grow your business and generating income. Strategies and mindsets that work.

CSS3 Tutorial for Beginners: 26 Div & Span Elements (Inline Vs. Block Tags)

This is Sasha and thanks for joining me here for another CSS training video so that way you’ll learn how to edit and modify your business website. Today, we’re going to take a look at the div element and also the span element which also covers the inline versus block element tag.

Let me share with you how these work. Typically, these are used for layout purposes or how to structure the layout. Let’s take a quick look.

The Div vs. Span tag

If you take a look at the page here, what I’ve done is created a div, and a div is something we didn’t cover in the HTML course because it usually relates directly to the CSS and it’s often created for content spans. For example, you could have divs with inside divs and one big div for your whole website and one div for the navigation.

You might have another div for the left column and another div for maybe the center part of the website and another div maybe for the bottom or the footer. You can create things like that because it’s blocked, right? Everything is done in blocks.

A span element, however, is just an inline element. If I put a border around both of these, what you can see is the div element goes all the way across. This is a block level element. But the span element, you can see just go up until the text is done.

Here is some text inside a div

Here is some text

If you take a look at the P tag or the paragraph tag and we go ahead and do that, and we change our CSS to the P tag, you can see the P tag because it goes all the way across. It’s a block level element. But what you can do is predefine these and change them to display, and then you can see right here we have inline. You can convert these and watch what happens. There, I switched it, and now it went back to looking just like a span, okay?

If you take span, for example, let’s go back, we’ll change this to span right there and close it off with the span tag, okay? You can see it right there, there’s our span tag, and again I could convert this to display a block level element, and you can see right there it goes out as a block.

You can do the same thing here with the div, and you can do inline, okay, and you can convert it, but if you’re using the elements correctly you shouldn’t need to do this. In either case, notice that you can go in and out and hop back and forth if necessary.

Here is some text inside a div

Here is some text

Using the div and span for layout purposes

The whole point that you’re trying to do with these things with is really for layout purposes. If I go ahead and do a bunch of spans here, you can see the span is – since they’re inline, they stay on the line, right, and they continue to wrap the line. If I do a bunch of divs, okay, and I add a lot of divs, you can see divs are just blocked levels.

Here is some text inside a div

 

Here is some text inside a div

 

Here is some text inside a div

 

Here is some text inside a div

Here is some text inside a span
Here is some text inside a span
Here is some text inside a span
Here is some text inside a span

What’s interesting about divs is you can also define a width, okay? If I go to the width and let’s say I go to 250 pixels, okay? Now, they’re all 250 pixels. I can also define a height, okay? If I mean, okay, let’s say 200 pixels there on the height, and now you can see. Let’s make it a little bit tighter let’s say 70 pixels.

You can see how these now creates a block, okay? It creates this width and height. Now if I do that on the span, watch what happens. If I do that on the span, nothing changes because you can’t define a width and height to inline based elements.

However, if you go ahead and change the display and you do block, now these elements will be the same size as the other element. You can see there I have red and there are the blue ones. You can they are all very similar.

Here is some text inside a div

 

Here is some text inside a div

 

Here is some text inside a div

 

Here is some text inside a div

Here is some text inside a span
Here is some text inside a span
Here is some text inside a span
Here is some text inside a span

You can see how this works conveniently as you start mixing and modifying the layout is that when you have inline elements, you know, such as a span right here, there are good four things that are inline. It might be, you know, you have some text and what you might want to do is when you have some of that text, you decide to, okay, inside of this div, let’s remove a few of these. I might – or inside of a paragraph, so I have a paragraph, and we type some dummy text goes here. Then, I could go ahead and, you know, do a span tag right there, and you can see you can style it like that because it’s inline whereas the P tag or the paragraph tag. Let’s create one border, 1 pixel solid, let’s say orange.

You can see that paragraph tag spans all the way whereas the inline element is – since it’s inline, it only affects that a little bit.

Type some dummy text goes here

 

As you’re starting to do like background and number let’s say a little grayer background so you can see. It affects those span elements. Let me get rid of that other span and that other div, okay? Here, right there, and you can see how that’s affecting just that inline element.

List of the block and inline elements

That’s how ultimately these things are used, but as you start getting more deeper into creating things, I’ll show you some more practice concepts with this in a minute. But ultimately, block elements, if you look at block elements, there’s a section element, the other one is let’s see the header, the header is not – you could use the header. The header is another block element. I believe the footer is also another block element.

You have an article. That’s also a block element. These are all really block elements, and you can easily tell what they are because if you go in and let’s say, okay, header, footer, article, and section. Let’s say we come up with this and you can see they all span and they have a width and height and so on. If I got rid of the width, it should go all the way across which would make it a block element. Exactly.

 

 

 

 

Type some dummy text goes here

 

Those are all block elements. It’s easy to tell them apart. However, when you get into the span, it’s inline on that element. I believe the image is also inline because if you type in the picture and you type in out your copy, it goes inline with the text.

Let’s hop in an image real quick here, and we’ll pop in this image, okay, src, okay, let’s define the width, I’d say 200 right there, okay? There’s the image, and if I continue typing text, you can see how it’s inside the line. Let me get rid with some of these sections and articles.

There you go, you can see that that the text continues, continue start, okay? You can see we start the text right there, it’s inline, and the text remains, so it’s not a full block. But you can naturally convert it into a block if you want but ultimately that’s the difference between inline and block style elements, and it’s geared for learning the layout purposes.

Type some dummy text goes here

 

I think there’s another video that we should do to take a look at how to define or create like a little layout with these, but ultimately that’s getting into more layout development as you start looking at HTML and CSS working together.

In either case, that’s kind of the core behind the div element, how it works, and you can have divs within divs so I could go ahead and say, “Okay, this is a div.,” and I could say, “Okay, this is a closing div.” I have that div right there, okay, and let’s go ahead and get rid with some of these, fix our CSS, and we don’t need the height because that’s why it’s shrinking.

Continue start continue typing text

 

Type some dummy text goes here

 

I have that div element right there, and you can see and all the texts and contents inside of it, so it allows me to structure that element with a block level element and position it, align it, modify it in the ways that I need to to create my layout.