Block vs Inline display style in CSS

HTML elements can be displayed either in block or inline style. 
The 3 ways that HTML elements can be displayed 
All HTML elements are naturally displayed in one of the following ways: 
Block 
Takes up the full width available, with a new line before and after (display:block;) 
Inline 
Takes up only as much width as it needs, and does not force new lines (display:inline;) 
Not displayed 
Some tags, like <meta /> and <style> are not visible (display:none;) 
Block example 
<p> tags and <div> tags are naturally displayed block-style. 

(I say “naturally” because you can override the display style by setting the CSS display property e.g. display:inline;.) 

A block-display element will span the full width of the space available to it, and so will start on a new line in the flow of HTML. The flow will continue on a new line after the block-display element. 

Common HTML elements that are naturally block-display include: 

<div> 
    Your general-purpose box 
<h1> … <h6> 
    All headings 
<p> 
    Paragraph 
<ul>, <ol>, <dl> 
    Lists (unordered, ordered and definition) 
<li>, <dt>, <dd> 
    List items, definition list terms, and definition list definitions 
<table> 
    Tables 
<blockquote> 
    Like an indented paragraph, meant for quoting passages of text 
<pre> 
    Indicates a block of preformatted code 
<form> 
    An input form 

Inline example 
Inline-display elements don’t break the flow. They just fit in with the flow of the document. 

More elements are naturally inline-style, including: 

<span> 
    Your all-purpose inline element 
<a> 
    Anchor, used for links (and also to mark specific targets on a page for direct linking) 
<strong> 
    Used to make your content strong, displayed as bold in most browsers, replaces the narrower <b> (bold) tag 
<em> 
    Adds emphasis, but less strong than <strong>. Usually displayed as italic text, and replaces the old <i> (italic) tag 
<img /> 
    Image 
<br> 
    The line-break is an odd case, as it’s an inline element that forces a new line. However, as the text carries on on the next line, it’s not a block-level element. 
<input>