The Differences Between Inline and Block Elements in Html

In HTML, there are three basic level of elements, these are;

1. inline level element
2. Block level element
3. Inline-block level elements

However, there are two most used ones, the inline level and the block level elements.

The key differences between inline level and block level element

1.Display Behavior:

•             Inline elements: Inline elements do not start on a new line and only take up as much width they need to fit their content. They flow along with other inline elements horizontally within their containing element.

•             Block elements: Block elements start on a new line and occupy the full available width by default. They create a block-level box that spans the entire width of their containing element. You can also learn the differences between position absolute and relative to know more.

2. Box Model:

•             Inline elements: Inline elements do not respect properties related to the box model, such as width, height, margin, or padding. The height and width of inline elements are determined by their content, and any margins or padding applied to them do not affect the surrounding elements.

•             Block elements: Block elements adhere to the box model and respect properties such as width, height, margin, and padding. They have a defined content area and can have margins and padding applied to them, which affect the positioning and spacing of other elements.

3. Line Breaks:

•             Inline elements: Inline elements do not create line breaks. They flow along with the text and other inline elements within a single line.

•             Block elements: Block elements create line breaks before and after themselves, causing subsequent content to appear on new lines.

4. Nesting Behavior:

•             Inline elements: Inline elements can be nested within other inline elements, and they can contain only other inline elements or text nodes.

•             Block elements: Block elements can be nested within other block elements, and they can contain both block and inline elements.

Examples of inline elements include <span>, <a>, and <strong>, while examples of block elements include <div>, <p>, and <h1>-<h6> etc.

You can learn more about the various Html tags and their uses

Example on the differences between inline and block level elements

Html

 <span>I am an inline level element</span>
    <a href="#">This link is an inline level element</a>
    <br />
    <br />

    <p>This paragraph is a block level element</p>
    <h1>This heading is also a block level element</h1>

CSS
span,
a {
  border: 2px solid red;
  margin-bottom: 200px;
  /* notice here that, 200px margin was added to the bottom of the anchor tag but, that did not reflect in the browser, the space between the anchor tah and the paragraph was still the same */
}
p {
  color: red;
  font-size: 2rem;
  border: 2px solid green;
  margin-bottom: 10px;
  /* here a margin of 10px was added to the bottom of the p tag andit was respected as shown in the browser */
}
h1 {
  color: rgb(175, 23, 116);
  border: 2px solid blue;
}

Result

We can clearly see that the distance between the paragraph and the heading text was as a result of the margin added to the bottom of the paragraph text.

Note that the display behavior of elements can be altered using other CSS properties like display, position or float, thereby allowing the elements to deviate from their default inline or block behavior.

Hopefully this tutorial and example gives you an insight on the differences between inline and block level element.