Block And Inline Elements | Inline vs Block Level Elements

Block And Inline Elements

The browser display every HTML element in one of the two methods, inline and block element. There is a display CSS property, which actually controls the display of the element in the web browser. Every HTML element have default display setting value.

The Block element uses complete horizontal (browser width direction) space, irrespective of its content size. Or you can say in other words the block element does not allow to share space (horizontal) with any other elements.

The Inline elements are displayed inline with other inline elements. Or in other words you can say that the inline elements allow to share its remaining horizontal space with any other inline elements.

Block Level Elements in HTML

The block level element will cover complete horizontal space (from left side of browser window to the right most), even in the case when size of its content is very small.

Sometimes the block level element also defines as it will start with a new line and end with a new line, it is actually a way of explaining the effect what a block level element does.

Examples of Block Level Elements in HTML

Tag Typical Use
<p> Tag Paragraph
<h1> to <h6> Tag All heading tags
<div> Tag It is block level container Tag
<pre> Tag Pre formatted text

The <div> tag is block level container element to encapsulated other HTML element.

Note: With the help the display, CSS style property one can easily change the display behavior of any Block or Inline HTML Elements.

Inline HTML Elements

The Inline HTML element will not cover complete horizontal space, if the content of the element itself is small enough the remaining space can be used by the browser to place other inline elements.

The Inline HTML Elements are placed side by side by the web browser if the content is small to share horizontal space.

Examples of Inline HTML Elements

Tag Typical Use
<a> Tag Link Tag for hyperlinks
<img> Tag Image Tag
<span> Tag It is inline container Tag
<b> Tag Bold text
<strong> Tag Define important text

The <span> tag is Inline container element mostly used to encapsulated some small text. It is mostly used to format some small text in a paragraph, like bold, underline etc.

Note: With the help the display property one can easily change the display setting of any Tag. for example you can write (display:block;) in the style attribute of any HTML tag.

Inline vs Block Elements Example

In this example we use Inline and Block level elements in the same web page and see the difference, how browser display them.

Example 1 – HTML a tag with p tag to check the difference between HTML Block And HTML Inline Type Elements.

<!DOCTYPE html>
<html>
	<head>
	</head>
	<body>
		<a href="index.html">Home</a>
		<a href="about.html">About Us</a>
		<a href="products.html">Products</a>
		<a href="contact.html">Contact Us</a>
		<p>This is para 1.</p>
		<p>This is para 2.</p>
		<p>This is para 3.</p>
	</body>
</html>
Block And Inline Elements
Fig.1 – HTML Block And Inline Type Element Example

In the above example <a> element is inline, all the a element are displayed on same line. The <p> element is a block level element, and cover the complete space.

Inline vs Block Elements One More Example

In this example we use different other HTML Block and Inline type Elements in the same web page and see the difference, how browser display them.

Example 2 – HTML img tag with h5 tag to check the difference between .

<!DOCTYPE html>
<html>
	<head>
	</head>
	<body>
		<img src="flower.jpg" width="100" height="100" />
		<img src="flower.jpg" width="100" height="100" />
		<img src="flower.jpg" width="100" height="100" />
		<img src="flower.jpg" width="100" height="100" />
		<h5>This is heading 1.</h5>
		<h5>This is heading 2.</h5>
		<h5 style="background-color:yellow;">This is heading 3.</h5>
	</body>
</html>
Inline vs Block Elements
Fig.2 – Inline vs Block Elements in the Browser

In the above example <img> element is inline, all the images are displayed on same line. The <h5> element is a block level element, and cover the complete space.

In the above example last <h5> element is with background color and you can see that this background will cover complete horizontal space, even the content is very small, only a part of total space available.

How to change Default Setting for Display CSS Property for a HTML Elements

There is a display CSS property which we can use to set the other display option.

Example 3 – HTML a tag with display as block and p tag with display as inline.

<!DOCTYPE html>
<html>
	<head>
	</head>
	<body>
		<a style ="display:block;" href="index.html">Home</a>
		<a style ="display:block;" href="about.html">About Us</a>
		<a style ="display:block;" href="products.html">Products</a>
		<a style ="display:block;" href="contact.html">Contact Us</a>
		<p style="display:inline;">This is para 1.</p>
		<p style="display:inline;">This is para 2.</p>
		<p style="display:inline;">This is para 3.</p>
	</body>
</html>
Block Level and Inline HTML Elements Example
Fig.3 – Block Level and Inline HTML Elements Placement with Change in Display Property.

The screenshot above shows the browser output for code listing in example 3. In the screenshot shows that the <a> element now shown as block and <p> element as inline element.

Caution: In the above examples we have used style attribute of the tag, to specify inline CSS. But we can also use class or id attribute to specify the CSS style in the head part of the web page.

You can leave a response, or trackback from your own site.
Leave a Reply to the article

Learning & Certifications
Follow Us
Facebook Icon   Linked In Icon   Twitter Icon  
Validation and Recognition

Valid CSS! Valid HTML5!

Powered by Wordpress