What is the difference between inline and block HTML elements

HTML displays its elements in one of three ways:

• Inline: These elements do not force new lines before or after its placement, and it only consumes as much space as necessary.
• Block: New lines appear before and after the element with it consuming the full width available.
• Hidden: There are some elements that never display within the browser window, such as meta tags and script and style sections.

Block-level element :

• Block-level elements usually begin on a new line.
• Block-level elements can contain inline elements and other block-level elements.

<div style="border: 1px red solid;">Block-level element</div>
<div style="border: 1px green solid;">Block-level element</div>
<div style="border: 1px blue solid;">Block-level element</div>

• If no width is set, will expand naturally to fill its parent container
• Can have margins and/or padding
• If no height is set, will expand naturally to fit its child elements (assuming they are not floated or positioned)
• By default, will be placed below previous elements in the markup (assuming no floats or positioning on surrounding elements)
• Ignores the vertical-align property

Examples of Block Elements:

<p>, <div>, <form>, <header>, <nav>, <ul>, <li>, and <h1>.

Inline element:

• Inline elements do not usually begin on a new line.
• Inline elements can contain text and other inline elements.
  (Block-level elements cannot be contained in inline elements.)

<p>
<span style="border: 1px red solid;">Inline element</span>
<span style="border: 1px green solid;">Inline element</span>
<span style="border: 1px blue solid;">Inline element</span>
</p>

• Flows along with text content, thus
• Will not clear previous content to drop to the next line like block elements
• Is subject to white-space settings in CSS
• Will ignore top and bottom margin settings, but will apply left and right margins, and any padding
• Will ignore the width and height properties
• If floated left or right, will automatically become a block-level element, subject to all block characteristics
• Is subject to the vertical-align property

 Examples of Inline Elements:
<a>, <span>, <b>, <em>, <i>, <cite>, <mark>, and <code>.