Differences between html inline and blocks elements.

#html #css #beginners #tutorial

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

Top comments (4)

Vesa Piittinen • Dec 4 '20

If wondering about inline-block you can think of it as a single character. This is why vertical-align can be used to control them. Add some reference characters if you need to learn how vertical-align works.

Also images by default are pretty much inline-block, thus equivalent of a single character no matter how big the image is.