HTML Tutorials


» Introduction to HTML


» Getting Started

» HTML Example

» HTML Tags

» HTML Elements

» Nesting Tags

» Block & Inline Elements

» HTML Attributes

» HTML Comments

» File Paths

» HTML Entities & Symbols


» Important Tags

» HTML Headings

» Text Formatting

» HTML Links

» HTML Lists

» HTML Tables

» HTML Images

» HTML Audios

» HTML Videos

» HTML Iframes

» HTML Styles

» HTML Scripts

» Semantic Elements

» HTML Metadata


» Elements' ID

» Elements' Class

» Elements' Style

» Element's Align

» Element's Height & Width


» HTML Forms

» Input Elements

» HTML Textarea

» HTML Select


» Login Page

.. » HTML » Introduction » Block & Inline Elements
Share Tweet WhatsApp

Block & Inline Elements

HTML elements can be divided into: 1. Block Elements 2. Inline Elements 3. Inline - Block Elements BLOCK ELEMENTS Block elements in HTML are those elements which, when defined and irrespective of their content, they occupy the full width of the browser(<body> element actually) or whatever block element they exist in. In this case, they can not be display alongside other elements whether block or inline. Other elements must come after all their contents or elements have been displayed. EXAMPLE
<div style='border:1px solid black;'>Hello World</div>
<h1 style='border:1px solid black;'>1</h1>
<p style='border:1px solid black;'>Paragraph</p>


Above are some examples of block elements. Notice how they took over the full width of the browser irrespective of their contents. They will still do so even if their content is empty. In android application development, Block elements are called fill or match parent elements. That is, they will match the width of their parent(which may be the body element or some other elements). INLINE ELEMENTS Inline elements are opposite of block elements. That is, they don't fill up their parent elements' width rather they take up whatever width that is enough or appropriate for the display of their content. With this feature of theirs, you can therefore display more than one inline element together. EXAMPLE
<span style='border:1px solid black;'>Hello World</span>
<b style='border:1px solid black;'>1</b>
<input type='text' style='border:1px solid black;'/>


From the above, you must have understood the difference between block and inline elements. INLINE - BLOCK ELEMENTS Inline - block elements are both inline and at the same time, block. Inline because they don't take over the full width of their parent element and can as such be display with other elements but block because you can resize their width even to the extent of filling up the entire width of the parent element. EXAMPLE
<img style='border:1px solid orange;' width='40%' src='../media/html_logo.png'/> <span>Image</span>
<img width='100%' style='border:1px solid orange;' src='../media/html_logo.png'/>


So, you can control the width of inline - block elements to have other elements display beside them but as for block elements, even if you reduce their width, no element can be display beside them. SUMMARY
  1. HTML elements can also be categorized into Block, Inline and Inline - Block elements.
  2. Block elements takes up the full width of their parent element irrespective of their content and cannot accommodate other elements beside them.
  3. Inline elements takes up the width appropriate for the display of their content and can therefore accommodate other elements beside them.
  4. Inline - Block elements takes up the width appropriate for the display of their content and can accommodate other elements beside them but they are block because you can adjust their width to the extent of taking the full width of their parent element.
  5. The parent element for all elements having widths is the <body> element whose width is that of the browser tab.
Take a short quiz on Block & Inline Elements.
Ask a question or tell us if Block & Inline Elements is easy or not.

Join our 1,090 subscribers to receive tutorials' updates!

  We won't spam your mail box. We hate it.

StackBeginner 2021 © Joseph Omamode