HTML Block and Inline Elements
Every HTML element has a default display type. The two most common types are block and inline. This decides how the element takes space on the page.
Block elements
A block element always starts on a new line and takes the full width available. Examples: <div>, <p>, <h1> to <h6>, <ul>, <ol>, <li>, <table>, <form>, <header>, <footer>, <section>.
<p style="background:#d9ecff">Paragraph one</p>
<p style="background:#ffe3d9">Paragraph two</p>
Output in the browser
Paragraph one
Paragraph two
Each paragraph takes the full row, so the second one comes below the first.
Inline elements
An inline element does not start on a new line and takes only as much width as its content needs. Examples: <span>, <a>, <strong>, <em>, <img>, <code>, <input>, <button>.
<p>This is <strong>bold</strong>, this is <em>italic</em> and this is a <a href="#">link</a>.</p>
Output in the browser
This is bold, this is italic and this is a link.
All three inline elements stay in the same line as the text.
Difference between block and inline
| Point | Block | Inline |
|---|---|---|
| Starts on a new line | Yes | No |
| Width | Full width of the parent | Only as wide as the content |
| Width and height can be set | Yes | No (for most inline elements) |
| Can contain | Block and inline elements | Only inline elements (and text) |
Note:
Do not put a block element inside an inline element like <span>. Also, CSS can change the type, for example display: inline-block or display: block.
Summary
- Block elements take a full line, inline elements flow with the text.
- Common block:
div,p,h1,ul. Common inline:span,a,strong,img. - Next: HTML div and span.
Congratulations! Chapter Finished. Learn more about the similar topics:
| Exercises & Assignments |
|---|
| No Content Found. |
| Interview Questions & Answers |
|---|
| No Content Found. |