Understanding how the browser displays HTML elements is an important part of understanding how to create page layouts in CSS. In this video, start with examining the difference between inline and block level elements.
- [Instructor] There are two types of HTML elements: block-level and inline. Each has a set of default behaviors which define how these elements are displayed on a webpage. Block-level elements are by default the same height as the content contained between the tags, but they span the entire width of its container, even if the content itself doesn't. This is why block elements always start on a new line. When writing the HTML, block elements can be nested within other block elements, or wrap inline elements.
Most HTML elements are block-level, such as paragraphs, divs, and headings. Inline elements are the height and width of their content. The elements align to the left side by side in a line. It's not valid HTML to nest a block-level element within an inline element, but it can be used to nest other inline elements. HTML introduced one exception. Anchor tags used for links can wrap block elements. This is generally used when you want to group more than one block element together as one link.
Some common inline elements are the a, span, and strong tags. Let's take a look at an example. An easy way to check if an element is block or inline is to add a background color or border style around it. If the color stretches all the way across the container, it's a block element, and if it only spans the width of the actual content, then it's an inline element. You can use width and height properties to change the size of block elements. I'm going to go ahead and uncomment the height and the width for these two block elements, the div and the p.
Now, if I add height and width to the inline elements, you're going to notice a little difference. Nothing happened. By default, width and height have no effect on inline elements. But, the display property can be used to change these default styles associated with the inline and block-level elements. Let's take a quick look at some documentation before we apply it to our example. Looking at this reference from the Mozilla Developer Network, you can see that there are quite a few options listed under the Syntax for the different display properties.
In this course, we'll go over the more commonly used values. Block, inline, none, and inline-block. Let's go back to our example and add these display values. So for inline elements, adding width and height has no effect, but this is where we can use the display property to change that. If I set the display to block for the inline elements, what will happen is inline elements will now behave like block-level elements.
You may notice that there is this space between the div and the paragraph, but there's no space between the span and the link. That's because there's some extra space surrounding the paragraph. We'll talk about that a little bit later. Now if I change this value to inline-block, what will happen is we will get characteristics of both inline and block-level elements. I'll go ahead and run that. So the elements now line up side by side, the way inline-level elements do, but it also takes the height and the width values the way block-level elements do.
This display property can be applied to block-level elements as well. So if I add display: inline to the block elements, it will make them behave like inline elements. And the same goes for inline-block. The value of none will actually just hide the element and not display it at all. This is often used to hide content until it needs to be shown on some type of user action. For example, a drop-down menu is hidden until you hover it.
There's a little more you'll need to know about working with display, but we'll get more into that a little later on in this course.
- Creating a CSS file
- Writing basic selectors
- Setting properties
- Using different typefaces and web-safe fonts
- Understanding cascading and inheritance
- Setting a font family, font size, text color, and more
- Understanding the box model
- Using the float property