Hi! As you are reading through this paragraph, you can see that inline elements flow like text. They do not create new line breaks like block elements.
Hi! I'm a block-level element, which is a block of content.
For this project, we'll be going over how CSS can change behavior in inline and block-level elements. If you'd like to review the basics of these elements, please go to the blog post Inline Elements & Block-Level Elements first before reading on.
Is it possible to have a block element act as an inline element? Yes! By using the above code, the element is still set inline but will behave like a block element. And for an added bonus, these inline elements will obey height and width properties.
Remember how h2 tags were block elements? With a little CSS, they are now behaving like inline elements.
By using this bit of code, you can have an element display as a block element. To demonstrate, lets take an inline element a tag and turn it into a block element. Normally, this inline element would flow like regular text. But now you'll notice that it creates a new line break and takes up the full width of its container:
With this, you can have an element display as an inline element. However, don't forget that inline elements will still ignore width and height properties. And unlike block elements, no new line break will be created.
As you can see, we've created the natural block element li to display as an inline element.