CSS Display

There are times when it is required to change the display property of some elements.

For instance, to create a simple navigation links, the easiest way is to change the display property of list elements to show the list in the same line instead of one per each line.

The CSS display property's values and description is provided in the below table.

Value Description
Inline As the name implies, the inline property makes the element to follow the flow of a line.
Block It makes the HTML element to be a stand alone element, it is helpful to manipulate height and width of a specific element effectively.
None It makes the element to disappear, the code will be there but the element won't be displayed.

Example

CSS Display Example


<ul>
<li><a href="" target="_parent">Home</li>
<li><a href="" target="_parent">About Us</li>
<li><a href="" target="_parent">Contact Us</li>
</ul>
		

Preview

CSS Display property applied to the above unordered list is given below.

<style>
li {
   display:inline;
   }
</style>
		

Next Lesson > CSS Grouping & Nesting