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>.
 

What is the difference between visibility:hidden and display:none?

display:none means that the the tag in question will not appear on the page at all (although you can still interact with it through the dom). There will be no space allocated for it between the other tags.

visibility:hidden means that unlike display:none, the tag is not visible, but space is allocated for it on the page. The tag is rendered, it just isn't seen on the page.