In this Presentation Block and Inline Elements explained completely..

1. HTML Elements
Block & Non-Block (In-Line)
Level Elements

2. Description
• Every HTML element has a default display value depending on what
type of element it is. The default display value for most elements is
block or inline.

3. Block-level Elements
A block-level element always starts on a new line and takes up the full width
available (stretches out to the left and right as far as it can).
 A block-level element is an HTML element that begins a new line on a Web
page, and extends the full width of the available horizontal space of its parent
element.
 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)

4. Example Block-level Elements
<p>, <div>, <form>, <header>, <nav>, <ul>, <li>, and <h1>.

5. Inline & Non-Block Elements
An inline element does not start on a new line and only takes up as much width
as necessary.
 Flows along with text content.
 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

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