Differences between html inline and blocks elements.

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

Comments

[Madza]

This is a must-have knowledge for beginners to avoid headaches from why the layout does not work 😄😄

[btlm]

Definitely, understanding a box model saved me a lot of time developing layouts.

[akshay-jaagirdhar]

yes perfect