Block and Inline Display values

share link

by vigneshchennai74 dot icon Updated: Mar 30, 2023

technology logo
technology logo

Guide Kit Guide Kit  

Block and inline display values can be applied to HTML elements using CSS. These values determine how the element is visually displayed on the webpage.


Block-level elements are commonly used for larger sections of content. Block-level elements occupy the entire width of their parent container and create a new line after the element. Examples of block-level elements include headings (h1, h2, h3, etc.), paragraphs (p), and divs.


Inline-level elements are used for smaller content. It should be displayed within a larger block-level element. But, inline-level elements only occupy the necessary width to display their content and do not create a new line after the element. Examples of inline-level elements include spans, images (img), and links (a). Understanding and utilizing the block & inline display values can help create appealing and sound web pages. By defining these values, developers can ensure that their content is organized. And logically pleasing and create a better user experience for their visitors.