Differences between html inline and blocks elements.

akshay-jaagirdhar — Fri, 04 Dec 2020 07:41:30 +0000

The following image depicts the how exactly block and inline elements looks like.

Each html elememts has its own display values.
There are two types of display values in html : inline and block

`block`:

Block element always starts with new line and it takes complete available width.(stretches out to the left and right as far as it can).
Following example code for block element(i.e <div> element)

Here are the block-level elements in HTML:

<address> <article> <aside> <blockquote> <canvas>
<dd> <div> <dl> <dt> <fieldset> <figcaption> <figure> <footer> <form> <h1>-<h6> <header> <hr> <li> <main> <nav> <noscript> <ol> <p> <pre> <section> <table> <tfoot> <ul> <video>

`inline`:

An inline element is the opposite of the block-level element.
As a name itself indicates Inline element does not start with a new line it will embed with existing line.
inline element takes the width only as much as necessary.

Following example code for inline element(i.e span element):

Here are the inline-level elements in HTML:

<a> <abbr> <acronym> <b> <bdo>
<big> <br> <button> <cite> <code> <dfn> <em> <i> <img> <input> <kbd> <label> <map> <object> <output> <q> <samp> <script> <select> <small> <span> <strong> <sub> <textarea> <time> <tt>

You still has any doubt on this topic then please go through the following link:

click this link to know more about inline and block elements

`conclusion`

Forgive me if i did any grammatical mistakes.

this is just a simple introduction about inline and block elements.

I will come back again with detailed information wait for it....

please leave your feedback ,because bill gates once said "Your most unhappy customers are your greatest source of learning." thank you...

DEV Community: akshay-jaagirdhar

Differences between html inline and blocks elements.

block:

inline:

conclusion

`block`:

`inline`:

`conclusion`