TL;DR – HTML inline elements are displayed in the same line they were originally placed in. Block elements start in a new line and take up all its width.
Understanding the Difference: Block vs. Inline
Based on how they are displayed by the browser by default, HTML elements are divided into two groups: inline and block-level elements.
While block elements move to a new line and take its whole width, inline elements stay in the line they were put in and don't take any more space than is needed for their content:
A good example of inline elements are text formatting elements, such as <em> or <strong>. They only need to affect the look of text. Meanwhile, HTML headings and paragraphs are block elements, as they help to create the structure of the page.
Block Elements: Examples
Block elements are the elements that always start with a new line, take up all available width of the website and are displayed in a column. It is the default value for a bunch of elements which we will review in this section.
<div style="background-color: lightpink;"> This div is on the top. </div> <div style="background-color: cornsilk;"> This div is on the bottom. </div>
<h1>This text in on the top.</h1> <h2>This text is on the bottom</h2>
<p>Hi I'm a paragraph</p> <p>I'm the paragraph under the first one</p>
<form> <input type="text"></input> <input type="submit" value="Submit"></input> </form> <form> <input type="text"></input> This form is under the first form. <input type="submit" value="Submit"></input> </form>
Theory is great, but we recommend digging deeper!
Defining Inline Elements
HTML inline elements don't start with a new line. They also only take up as much space as their content. A few of them would be displayed side by side in the page.
<p><span style="background-color: bisque;">I will</span> stay on the line I was placed on.</p>
<p>This <a href="https://www.bitdegree.org">link</a> stays on the same line it was on.</p>
<img src="image.png" alt="Space Doggo" width="50" height="50">
HTML Inline and Block Elements: Useful Tips
- The chances to style HTML inline elements with CSS are rather limited. However, you can set height, width, margin, padding and more for block elements.
- HTML elements only come as block or inline elements by default. However, in CSS, the display property also accepts an inline-block value. Such element stays in the line it was put in, but can be styled like a block element.