Inline and Block Elements in CSS | Block Vs Inline Elements

Inline and Block Elements in CSS

In Html programming we have two distinct display modes to display the elements. They are the inline elements and the block level elements. Now with the help of CSS we can make inline element a block level element and a block level element can be turned into an inline element.

What is an inline element?

The inline element in Html is the element that flows with the text or you can say it stays in line with the text. There are a number of inline elements in HTML for example the <span>, <a> and <image> tags etc. These elements can be used in paragraph and they will not interpret the text in a paragraph. In the following example we are showing the use of an inline element in the paragraph.

Code:

<!DOCTYPE html>

<!-- www.howtocode.pk is one of the leading Web development tutorial Site. -->

 

<html>

<head>

<title>

Paragraph Example From howtocode.pk

</title>

</head>

<body>

<p>

Lorem ipsum dolor sit amet, consectetur adipiscing elit. In in risus lacus.<a href="www.howtocode.pk"> How to code</a> In auctor orci id tortor viverra nec consectetur eros rhoncus. Vivamus elementum velit arcu, ac porta risus. Quisque ut est vitae dolor tempus adipiscing. Ut mauris quam,

malesuada non laoreet ac, elementum vel enim. Nulla auctor congue accumsan. Pellentesque habitant morbi tristique senectus et

netus et malesuada fames ac turpis egestas. Aliquam adipiscing facilisis nibh consectetur fermentum. Phasellus egestas bibendum

suscipit. Curabitur est dolor, ultrices quis aliquet sit amet, rhoncus nec nisi. Integer dictum diam sit amet enim dapibus

adipiscing.<span style="color:red;">howtocode.pk</span> Ut sit amet mauris sit amet odio malesuada lacinia. Praesent ac nunc arcu, et eleifend odio.

</p>

</body>

</html>

Output:

Lorem ipsum dolor sit amet, consectetur adipiscing elit. In in risus lacus.;Howtocode.pk In auctor orci id tortor viverra nec consectetur eros rhoncus. Vivamus elementum velit arcu, ac porta risus. Quisque ut est vitae dolor tempus adipiscing. Ut mauris quam, malesuada non laoreet ac, elementum vel enim. Nulla auctor congue accumsan. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Aliquam adipiscing facilisis nibh consectetur fermentum. Phasellus egestas bibendum suscipit. Curabitur est dolor, ultrices quis aliquet sit amet, rhoncus nec nisi. Integer dictum diam sit amet enim dapibus adipiscing. howtocode.pk Ut sit amet mauris sit amet odio malesuada lacinia. Praesent ac nunc arcu, et eleifend odio.

In the above code you can see that we have put two inline elements in the paragraph. The first is a link or an anchor tag which is in the between the text of the paragraph and became a part of it. Same is the with the <span> tag with we have used near the end of the paragraph. It is also flowing with the text of paragraph. Of course we can make them a block level element with CSS.

What are the block level elements in html?

The block level elements do not flow with the text but they take the vertical space in an html document. The vertical space means from the start of the container element to the end of it. You can make inline element a block level with the help of CSS.

Note: If you want to see more on CSS go to Learning CSS link.

Here are some block elements like a <div> or <p> tag. They both are block level elements but you can put more divs and other block and inline tags in a <div> tag. On the other hand it is not recommended to put or in fact it is not allowed to put other block level elements in a paragraph.

Code:

<!DOCTYPE html>

<!-- www.howtocode.pk is one of the leading Web development tutorial Site. -->

 

<html>

<head>

<title>

Paragraph Example From howtocode.pk

</title>

</head>

<body>

<div>

Lorem ipsum dolor sit amet, consectetur adipiscing elit. In in risus lacus.<a href="www.howtocode.pk"> How to code</a> In auctor orci id tortor viverra nec consectetur eros rhoncus. Vivamus elementum velit arcu, ac porta risus. Quisque ut est vitae dolor tempus adipiscing. Ut mauris quam,

malesuada non laoreet ac, elementum vel enim. Nulla auctor congue accumsan. Pellentesque habitant morbi

 

<div style="background-color: lime;">

netus et malesuada fames ac turpis egestas. Aliquam adipiscing facilisis nibh consectetur fermentum. Phasellus egestas bibendum

suscipit. Curabitur est dolor, ultrices quis aliquet sit amet, rhoncus nec nisi. Integer dictum diam sit amet enim dapibus

adipiscing.<span style="color:red; font-size:18px">howtocode.pk</span> Ut sit amet mauris sit amet odio malesuada lacinia. Praesent ac nunc arcu, et eleifend odio.

</div>

</div>

</body>

</html></html>

Output:

Lorem ipsum dolor sit amet, consectetur adipiscing elit. In in risus lacus.IlmiwebIn auctor orci id tortor viverra nec consectetur eros rhoncus. Vivamus elementum velit arcu, ac porta risus. Quisque ut est vitae dolor tempus adipiscing. Ut mauris quam, malesuada non laoreet ac, elementum vel enim. Nulla auctor congue accumsan. Pellentesque habitant morbi

netus et malesuada fames ac turpis egestas. Aliquam adipiscing facilisis nibh consectetur fermentum. Phasellus egestas bibendum suscipit. Curabitur est dolor, ultrices quis aliquet sit amet, rhoncus nec nisi. Integer dictum diam sit amet enim dapibus adipiscing. howtocode.pk Ut sit amet mauris sit amet odio malesuada lacinia. Praesent ac nunc arcu, et eleifend odio.

 

You can clearly see that the div in the outer div is starting from the new line not inline with the other text. Now by changing the block level div into an inline level we get the output as:

Code:

<div>

Lorem ipsum dolor sit amet, consectetur adipiscing elit. In in risus lacus.<a href="www.howtocode.pk">Howtocode.pk</a>In auctor orci id tortor viverra nec consectetur eros rhoncus. Vivamus elementum velit arcu, ac porta risus. Quisque ut est vitae dolor tempus adipiscing. Ut mauris quam,

malesuada non laoreet ac, elementum vel enim. Nulla auctor congue accumsan. Pellentesque habitant morbi

 

<div style="background-color: lime">

netus et malesuada fames ac turpis egestas. Aliquam adipiscing facilisis nibh consectetur fermentum. Phasellus egestas bibendum

suscipit. Curabitur est dolor, ultrices quis aliquet sit amet, rhoncus nec nisi. Integer dictum diam sit amet enim dapibus

adipiscing.<span style="color:red; font-size:18px">howtocode.pk</span> Ut sit amet mauris sit amet odio malesuada lacinia. Praesent ac nunc arcu, et eleifend odio.

</div>

Output:

Lorem ipsum dolor sit amet, consectetur adipiscing elit. In in risus lacus.;Howtocode.pk In auctor orci id tortor viverra nec consectetur eros rhoncus. Vivamus elementum velit arcu, ac porta risus. Quisque ut est vitae dolor tempus adipiscing. Ut mauris quam,

malesuada non laoreet ac, elementum vel enim. Nulla auctor congue accumsan. Pellentesque habitant morbi

netus et malesuada fames ac turpis egestas. Aliquam adipiscing facilisis nibh consectetur fermentum. Phasellus egestas bibendum suscipit. Curabitur est dolor, ultrices quis aliquet sit amet, rhoncus nec nisi. Integer dictum diam sit amet enim dapibus adipiscing. howtocode.pk Ut sit amet mauris sit amet odio malesuada lacinia. Praesent ac nunc arcu, et eleifend odio.

Comments