Skip to main content

CSS Display

CSS display is the most important property of CSS which is used to control the layout of the element. It specifies how the element is displayed.

Every HTML element has a default display value depending on what type of element it is. The default display value for most elements is block or inline.

Block-level Elements​

A block-level element always starts on a new line and takes up the full width available (stretches out to the left and right as far as it can).

Examples of block-level elements:

  • <div>
  • <h1>, <h2>, <h3>, <h4>, <h5>, <h6>
  • <p>
  • <form>
  • <header>
  • <footer>
  • <section>

CSS display values​

Most common CSS display values are:

  1. display: inline;
  2. display: inline-block;
  3. display: block;
  4. display: run-in;
  5. display: none;

1. CSS display inline​

The inline element takes the required width only. It doesn't force the line break so the flow of text does not break in inline example.

The inline elements are, for example:

  • <span>
  • <a>
  • <em>
  • <img>

Example:

<html>
	<head>
		<style>
		p {
			display: inline; 
		}
		</style>
	</head>
	<body>
		<p>Hello World!</p>
		<p>A paragraph.</p>
		<p>A second paragraph.</p>
		<p>The third paragraph.</p>
		<p>The last paragraph!</p>
	</body>
</html>

Output:

Example Display inline

2. CSS display inline-block​

The CSS display inline-block element is similar to inline element but the difference is that you can set the width and height.

Example:

<html>
	<head>
		<style>
		p {  
			display: inline-block;   
		}
		</style>
	</head>
	<body>
		<p>Hello World!</p>
		<p>A paragraph.</p>
		<p>A second paragraph.</p>
		<p>The third paragraph.</p>
		<p>The last paragraph!</p>
	</body>
</html>

Output:

Example Display inline-block

3. CSS display block​

The CSS display block element takes as much as horizontal space as they can. Means the block element takes the full available width. They make a line break before and after them.

Example:

<html>
	<head>
		<style>
		p {  
			display: inline-block;   
		}
		</style>
	</head>
	<body>
		<p>Hello World!</p>
		<p>A paragraph.</p>
		<p>A second paragraph.</p>
		<p>The third paragraph.</p>
		<p>The last paragraph!</p>
	</body>
</html>

Output:

Example Display block

4. CSS display run-in​

This property doesn't work in Mozilla Firefox. These elements don't produce a specific box by themselves.

  • If the run-in box contains a block box, it will be same as block.
  • If the block box follows the run-in box, the run-in box becomes the first inline box of the block box.
  • If the inline box follows the run-in box, the run-in box becomes a block box.

5. CSS display none​

The display:none; is commonly used with JavaScript to hide and show elements without deleting and recreating them. The element with none won't take any space.

<html>  
	<head>  
		<style>  
		h1.hidden {  
		    display: none;  
		}  
		</style>  
	</head>  
	<body>  
		<h1>This is visible.</h1>  
		<h1 class="hidden">This isn't visible.</h1>  
	</body>  
</html>

Output:

Example Display none

note

Setting the display property of an element only changes how the element is displayed, NOT what kind of element it is. So, an inline element with display: block; is not allowed to have other block elements inside it.

note

Also visibility:hidden; hides an element but it still affects the layout.

Table of Contents