Use quote marks to find an "exact phrase"

Print version

print icon

21: 'Display' property

'Display' property

In Lesson 5 you learnt how each element is of the 'block' or 'inline' type by default. This is known as the ‘display’ type, and it affects how an element is positioned on the page.

These values can be changed from one to the other using the 'display' property. To change a block element to inline, insert 'inline' as the value. And vice versa.


selector {	     
  display: inline;
  }
					

There are several values other than 'block' and 'inline'. The most common are 'inline-block', 'flex' and 'none'. These are beyond the scope of this introductory course.

Example: Changing an image from inline to block

This example shows what happens when you change an image from 'inline' to 'block'. In the sample code on the left there are two paragraphs, and embedded within each is an image. Images are 'inline' elements by default.

Have a look at the first image in the 'Results' box underneath. It is in line with the text, as if it were just another word in the text. Resize the window and you will see it shift around with the text.

The second image, in the second paragraph, has been styled to make it a 'block' element instead of an 'inline' element. This image has a class called 'makeitblock', and you can see the styling for that class in the CSS box below right. The display property has been set to 'block'. In the Results box underneath you will see how that image is set apart from the text – it sits on its own line, taking up all the available width. The text does not wrap around it, and it does not move with the text as you resize the window.

HTML


<p>
Images are inline by default. Images are inline by default. Images are inline by default. Images are inline by default. Images are inline by default. Images are inline by default.<img src="../images/jobs.jpg">  Images are inline by default. Images are inline by default. Images are inline by default. Images are inline by default. Images are inline by default.
</p>
<p>
Images are inline by default, but it can be overridden. The default display value can be overridden. Images are inline by default. <img src="../images/jobs.jpg" class="makeitblock"> Images are inline by default, but it can be overridden. Images are inline by default. Images are inline by default, but it can be overridden.
</p>
														  

CSS


.makeitblock {	     
	display: block;
	}
																

Result

Images are inline by default. Images are inline by default. Images are inline by default. Images are inline by default. Images are inline by default. Images are inline by default. steve jobs Images are inline by default. Images are inline by default. Images are inline by default. Images are inline by default. Images are inline by default.

See how this one is on its own line. The default display value has been overridden. See how this one is on its own line, steve jobs and it stays in the same place when you resize the window. Images are inline by default, but it can be overridden. See how this one is on its own line. Images are inline by default, but it can be overridden.

Common examples of changing display property

A common real-life reason for changing from 'block' to 'inline' is to create a horizontal menu bar. A reason for changing an 'inline' element (e.g. an image) to 'block' is to allow it to be centered horizontally.