Skip to Main Content

In HTML, block i inline elements are building blocks of web pages, each building block having a default display value. In the text, we have shown the basic characteristics of block i inline elements.

 

Block and inline elements

Block elements appear only inside the element and use the provided HTML tag as a tag to define the section, for example or . They start in new lines, take up the entire width of the page, and may contain embedded elements or sometimes another level of block elements.

inline an element is a presentation feature that uses the provided HTML tag as an HTML tag to define a section, for example or

Now, keep in mind, though, that understanding is a block inline elements still relevant, the differences between the blocks and inline elements are consumed through HTML 4.01. These two categories have since been replaced by a different set of content categories.

 

What is the difference between block and inline elements?

Knowing the difference between inline elements and block elements will help you immensely in your CSS and style. Because each of these elements behaves differently, it will be easier to get them to do what they want to do if you understand how they work.

If you do not understand the different rules that apply to inline elements versus block elements, HTML and CSS can be incredibly frustrating. For example, block elements may contain other block level elements as well inline elements. However, inline elements can only contain inline elements.

Which would mean that u element we can insert any element, no matter if it is a block or inline doc, u inline element let's say we can only insert inline elements e.g. ,

 

What is the difference between built-in and block elements?

When examining embedded elements in relation to a block, you will notice that embedded elements are usually text-based, and block-level elements are usually structural.

 

inline elements

inline  elements do not start with a new line, which means that they are arranged next to each other on the same line if there is enough space for them, because we cannot apply the CSS rule of top and bottom margins to them, nor give them width or height. But they can still be styled with left / right margins as well as with pedings.

  • They only take up space limited by the tags that define the element.
  • It doesn’t start on a new line.
  • They take up as much width as needed.
  • They do not interrupt the flow of content.
  • They can only contain data.
  • They may contain others inline
  • They are specified by the CSS in the flow schedule.

 

Some common inline the elements are:

 

The image below shows the behavior inline elements. All have a yellow border applied so you can see the width of the elements.

a screenshot with an example of positioned inline elements

As we can see in the picture above, we made a couple in the editor inline elements of the exact tags in which we put the numbers. In order to better understand the behavior inline elements we gave each 100% width and a certain height.

screenshot with html code of inline elements

As we talked in the previous part of the blog inline the elements ignore the given width and height and take up the width they think they should and line up next to each other. This gives us an indication that we need to follow the rules of writing these elements in order to write CSS as easily as possible.

 

Block elements

By default, the block-level element occupies the entire width of the parent container. When it reaches the edge of the container, it will descend below the other elements. So even if you only have one paragraph in , it will still take up the entire width of the browser. That is, unless you set the body width. It also means that if you have short sentences in separate paragraph marks, each paragraph starts on a new line.

  • They appear only within the element .
  • They start in a new line.
  • They take up the entire width of the page
  • Have a line break before and after the element.
  • It may also contain inline
  • Sometimes it may contain other block elements.

 

Some of the most common blocks of elements are:

screenshot with html code of block elements

In the picture below we can see 4 block elements in the form of paragraphs.

screenshot with positioned block elements

We can conclude that the block elements behave in the complete opposite inline elements, which means they take up the full width of the page, start in a new line, and accept CSS rules such as width, height, margins, and pedings.

 

For more news and interesting stories from digital marketing visit our blog page or follow our Instagram profile.

Made by Miloš Stojanović - Senior Web Developer @Digitizer