HTML Block & Inline
Each HTML element has a default value for the display property. The two most common default values of the display property are inline and block.
Block-level Elements
A Block element always starts on a new line. This means that two block elements cannot be on the same line.
By default, block elements stretch to fill the entire width of their parent container. Even if you set a margin, that space will not be replaced by another element.
When a block-level element contains another block-level element, the parent element is considered the containing block.
Example
Run Code<p>A block-level element</p>
<div>A block-level element</div>
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-level Elements
An inline element does not start on a new line. they flow within the content.
Their width is limited to the size of their content.
An inline element can not contain block-level elements.
Example
Run Code<span>A inline-level element</span>
Here are the block-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> |
| <sup> | <textarea> | <time> | <tt> |
Difference between Inline and Block Elements
| Block-level Elements | Inline-level Elements |
|---|---|
| Start on a new line and stretch to fill the parent’s full width. | Do not start on a new line; they flow within a line. |
| Can be set with width and height. | Ignore width and height; size depends on content. |
| All margin, padding, and border are respected (both vertically and horizontally). | Only horizontal margin/padding fully apply; vertical ones have limited effect. |
| Force a line break before and after the element. | Do not cause a line break; sit beside other inline elements. |
| Other block-level and inline elements. | Usually only text or other inline elements (cannot contain block-level elements in valid HTML). |
| For structuring layout and large content sections. | For styling or formatting text within a block. |