February 16th, 2019 
Nilesh Chaurasia 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>
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>
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>
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.
Posted in 
Tags: 
You can definitely see your enthusiasm in the work you write. The world hopes for even more passionate writers like you who aren’t afraid to say how they believe. Always go after your heart.