7 days of unlimited WordPress themes, plugins & graphics - for free!* Unlimited asset downloads! Start 7-Day Free Trial
FREELessons: 9Length: 43 minutes

Next lesson playing in 5 seconds

  • Overview
  • Transcript

2.6 Inline Elements

It may not be immediately obvious, but inline elements are also contained in a box. In this lesson, you’ll learn how the box model affects inline elements, such as spans.

2.6 Inline Elements

Hello and welcome back to understanding the CSS box model. In this lesson, I want to take a look at how the box model affects in line elements such as a span. Now you won't find a lot of really useful practical information in this particular tutorial, but it is important to understand how the box model affects different types of elements. So we're going to take a look at inline elements again, and specifically we're going to take a look at spans. So if you open up your inline-start.hmlt file that you can find in your project files folder, we'll get started with that one. And you'll notice that all we have here in our body is a span with a bunch of text in it. And then in our CSS, we're simply defining a rule for the span element, and we're setting a background color on it. And you'll notice I'm using an RGBA value. And the A value is set to 0.5, so that the color will be semitransparent, and you'll see why in a second, but for now let's go ahead and take a look at this in our browser. So as you can see our text is highlighted. We don't see anything interesting just yet, but let's see what happens if we add a little bit of padding. So I'm going to jump back into our code, and I'm going to go ahead and save this as a new file called inline end.html, and that's the file we'll end with at the end of this lesson, and then after our background color, I'm going to add padding to our spans, and I'm going to set our padding to let's say 20 pixels. Something nice and exaggerated. So we're going to save that. Jump back into our browser, and then we'll navigate to inline hyphen end dot html, and there we go. So when we add padding to our span element, to our inline element, you'll notice that it doesn't really affect the placement of the text very much. Now it does affect it in one particular spot, which we'll take a look at in a second, but for the most part our line height anyway is still the same. And that's because regardless of how much padding we put around an inline element, the spacing between lines as it wraps from one line to the next is always going to be determined by the line height property. However, if you look at the very beginning of the paragraph, you can see that the first letter here is nudged over, so the left and right edges are affected by padding, but the vertical alignment or the vertical spacing between lines is not affected at all by padding, and we'll discover the same thing about margins. If we go back to our code, and let's bring our padding down to five pixels for now, and let's add margins of 20 pixels and save that. If we jump back into our code and refresh, you'll notice that the Lorem text is still nudged over, but instead of being nudged over with padding, it's mostly nudged over with a margin on the left and right side. Now we can't see the right margin, because there's nothing to the right of this text block, but you get the basic idea. So again, just as with the padding, when we add margins to our inline elements, it's not going to effect the spacing between lines when our texts starts to wrap, instead, as I mentioned, that spacing is determined solely by the line height. The only thing that the margins and padding are really going to effect are going to be the left and right edges of our inline elements. So we can see this better if we take a smaller chunk of text. So let's change this to a paragraph, which is not an inline element, a paragraph is a block level element, and let's put a span somewhere inside here. So we'll put our opening span tag here, and then we'll cut our closing tag, and let's move it down here somewhere. So we'll save that and refresh our page, and again as you can see, the spacing between our span here in the line above it, the rest of the paragraph, that spacing has not changed at all, the only spacing that's changed are on the left and right edges of that span, so our settings are affecting the horizontal spacing, but not the vertical spacing. However, when you add this background color on it you can clearly see that it is adding padding above and below the item, but that padding is not pushing anything out of the way, it's not adding more space between that line and the next line. Another thing we can look at is if we were to add a boarder to our span, lets do a one pixel solid and lets make it black. Our border is going to behave a little bit differently, so if we save this and refresh our page, you'll see that for the most part, the border looks normal. But when our text wraps, you'll notice there is no right border on this first line. And there is no left border on the next line. Also, you'll see that our padding does not affect the end of a line or the beginning of a line. There is no padding applied. Just before this opening r here, there's padding around all of our text, but at the end of a line and the beginning of a line when a line of text wraps around to the next line, there is no padding affecting the spacing there. So again, as I mentioned there might not be a whole lot of useful, practical, information in this particular lesson, but it is important to understand how the box model affects inline elements as well as block level elements. So thank you for watching, and I'll see you in the next lesson.

Back to the top