What are Inline and Block Elements?

The difference between inline and block HTML elements is an often mixed up aspect of web development, so I need to take a short time to cover each and note the differences between the elements. If you don't understand the nature of elements and why different kinds of elements perform separately so HTML can be difficult for you.

What is Inline Elements?

An Inline elements start within a row, Does not start a new row and it takes space as it needs, Meaning that they will line up beside to each other on the same line if there is full area for them.
By default inline elements can not take a top or bottom margins, or width or height properties. If you didn't know the definite rules that inline elements follow, you would surely have a trouble.

List of inline elements:

a, span, strong, i, small, abbr, acronym, cite, code, em, br, img, map, object, q, script, sub, input, label, select, textarea, time, kbd

What is Block Elements?

Block level elements start a new row, And it covers full width area in that row.

List of block elements:

p, h1, h2, h3, h4, h5, h6, ol, ul, pre, address, blockquote, dl, div, fieldset, form, hr, noscript, table

These elements contained by paragraph, header, and div elements etc, Now appears with line breaks before and after it, which does not include them Also, the span element now appears with same line.

Change a default property?

p { display: inline } 
But p tag block element by default.

span { display: block }
And span tag inline element by default. 

Related interview question:

Question: What is the difference between span and p? 

Answer: p is a block element and span is inline element.

Question: Why we are use blockquote element? 

Answer: <blockquote> tag HTML Block Quotation tag, we can use this tag for out source quotation in this section.