In the earlier tutorials we have learnt about HTML elements. Those HTML elements are divided into two categories:
The contents of the inline elements are displayed on a single line. i.e. No line breaks or extra width is taken. The <span> element is an inline element.
Sounds tough?
Let us simplify with the below example.
<html> <body> No new line or extra width is added on <span>addition of span </span>element. </body> </html>
So, if you look at the above output, no new line or extra width is added to the text,
No new line or extra width is added on <span>addition of span </span>element.
Even after the addition of <span> element.
This is because the <span> element is an inline element and no line breaks or extra width would be taken for it.
Even if we add an extra height or width property to the style attribute of <span> element, there will be no change to the text inside it.
<html> <body> No new line or extra width is added on <span style = "height:400px;width:300px">addition of span </span>element. </body> </html>
So, if you look at the above output the text is just the same even after adding the height and width property to the style attribute of <span> element.
Some of the inline elements are :
The block elements comes with new line and acquires the entire horizontal space available.<div> element is a block element.
Let us simplify with the below example.
<html> <body> A new line is added on <div>addition of div </div>element. </body> </html>
So, if you look at the above output, a new line is inserted before and after the text addition of div.
This is because the <div> element is a block element which comes with a new line and also acquires the horizontal space available.
Just hang on! We haven't seen how the <div> element acquires the horizontal space(As it is hidden in the above case).
Let us draw a border around the <div> element to see how it acquires horizontal space.
<html> <body> A new line is added on <div style="border: 3px solid red">addition of div </div>element. </body> </html>
So, if you look at the above output, a red border is drawn across the text addition of div.
This is because we have added a border across the <div> element, to demonstrate how the <div> element takes the entire horizontal space of the container.
A new line is added on <div style="border: 3px solid red">addition of div </div>element.
Some of the common block elements are :