During creation of an HTML page using CSS, it is essential to know the HTML elements display behavior. HTML elements have three display style options inline, block and none. Each option has its significant in the designing of HTML page.
The basic difference among these display options is very important to know in order to use CSS efficiently. In this article, I will expose the basic difference among these display options.
Block display elements makes a separate block with a new line before and after.
It takes the full available width based on its parent element or container.
Using CSS we can fix height and width of block elements.
It can have other inline or block elements.
<div>, <h1>…<h6>, <p>, <ul>, <ol>, <dl>, <li>, <dt>, <dd>,<table>, <blockquote>, <pre>,<form> are displayed as block naturally.
Inline display elements stay with the flow of the document and don’t force the new line.
It takes the width as it needs.
Using CSS we can’t fix height and width of inline elements.
It can have only inline elements.
<span>, <a>, <strong>, <em>, <img />, <abbr>, <acronym>, <br>,<input> are displayed as inline naturally.
Some tags, like <meta />,<script> and <style> are not visible naturally.
We can change the display style of block elements to inline and vice-versa.
Examples of block and inline elements
A paragraph (html block element <p>)
A paragraph with fixed height and width
A paragraph converted into an inline element using display:inline;
An anchor tag (html inline element <a>)
An anchor tag with fixed height and width(to show that it does not work)
An anchor tag converted into a block element using display:block;
In this article I try to expose the display property of elements with simple examples. I hope after reading this article you will be able to make a good html design. I would like to have feedback from my blog readers. Please post your feedback, question, or comments about this article.