From the course: CSS: Display

Inline elements - CSS Tutorial

From the course: CSS: Display

Start my 1-month free trial

Inline elements

- By default, before applying any browser or author style sheet, every html element is set to a value of inline for its display property. The browser style sheet will override many of those html elements to block values instead. And I'm going to talk about block more in the next video. For now, let's focus on inline. What exactly does this mean? Which html elements are impacted, and how does this behave in the browser? So I'm going to start here with this code pen and I'm just going to start by, first of all, let's put a border around our paragraphs so we can clearly see where it's located. So I'm going to say a border of three pixels, solid black. And if you'll notice here, this particular border stretches all the way across the area that's displaying this portion of the webpage. We're in code pen so it's only that little white area over on the right hand side. And this paragraph is contained inside of the body tag. The body tag doesn't have a width set on it and so the paragraph is a block level element, it will expand to take up the width of its parent. So in other words it's going to go all the way across the page and you can see that we have a very clean box that goes all the way around our paragraph text. Now I'm going to add here P star. You see here in my html above, I have a paragraph. Inside of it I have a link, an emphasize, and a strongly emphasized tag. By setting my selector to P star, I'm going to be able to select all of the things that are descended from the paragraph. In other words, all three of those elements. Let's go in ahead and set a border to three pixels dotted green. And that will put a lovely box around those three elements. So you can see here we have a link, we have emphasized text and strongly emphasized text. Notice that those elements though are only as big as their content. In other words, they don't stretch all the way across the page; they only stretch to the width of the words. And that's because A, M, and strong are three very commonly encountered inline html elements. In other words, they're in line with the text. And what you're seeing here is one of the big differences between block and inline elements. Inline only as wide as its content, block as large as its containing element. These three elements, A, M, and strong are some of the most commonly encountered ones, but there's others like lots of form elements like input, button, and select. There's media elements like video, image, or picture that are in line, and there's some text oriented elements like Q, code, and small. The generic inline element without any semantic meaning is the span tag. So there's some other things you should know about inline elements. I'm going to demonstrate three more properties, one on each one of these inline tags. And I'm going to start with the strong tag here. So for my strong tag, what I'm going to do is give it a background color of yellow and then I'm going to give it padding of 2rem. So this is applied padding on all four sides of my strong tag. And as you can see here, it very happily overlaps all of the things that are inside of this paragraph and actually even goes outside of this paragraph. But it maintains its inline nature here. In other words, this text is still part of that paragraph. If I hadn't set the background color to yellow, you'd actually be able to see the text in the paragraph there, which is currently behind that big yellow box. We can make that padding a little bit smaller, it's a little excessive at the moment. So you get a better sense of what I'm talking about. So this is one of the properties of inline elements. You can add padding. The padding can be added on all four sides, but if the padding is exceeding, say, some of its neighboring text, it's going to expand to go over top of all of that neighboring text. A feature, not a bug. All right, the next property I want to demonstrate is on the M tag itself and here I'll set the background color to pink and then I'm going to set the margin to 1rem. Now, here you might expect to see exactly the same behavior that you saw with the strong tag. In other words, margin on all four sides. But as you see here, very clearly, I have got some margin on the left side, I've got some on the right side, but as you see here, the top of the emphasized box intersects with the top of the paragraph here and no margin has actually been applied at all to the M tag. It happens to be that margin is a property that can be applied to the left and the right sides of an inline element, but not to the top and the bottom. And then finally, I'm going to reset. I'm going to take off this padding here just for a moment here so we can actually see the link. And then I'm going to go ahead and add to this. Styling for this link in the A tag, let's say I set its width to 1000 pixels, which would be honking big. And as you'll see here, absolutely nothing changes. Why is that? Well, this is another property of inline elements. They are defined as being as wide as their content. The width property has no impact whatsoever on an inline element. So we can summarize properties of inline elements as follows. So first of all, remember that they are as wide as their content. Adding a width property has no effect on them at all. The padding is offered on all four sides, but the padding may overlap other elements, not push them out of the way. And finally, margin is going to be honored on the left and the right of an element only. Not on the top and the bottom.

Contents