Display

The display property specifies how / if an element should be displayed

 

With the following values assigned to the display property:

Value Description
hidden Hides the element, but it still takes up the same space
block Displays the element as a block element
inline Displays the element as an inline element

 

<!DOCTYPE html>
<html>
	<head>
		<title>My Document Title</title>
		<style type="text/css">
			#hideMe{display:none; }
			.blockMe {display:block; border:solid 2px blue; margin:1em; }
			li {display:inline; }
		</style>
	</head>
	<body>
		<p>This first list has the display property set as none:
		<ul id="hideMe">
			<li>Honda</li>
			<li>Yamaha</li>
			<li>Ducati</li>
		</ul>
		So it won't be displayed!</p>
		<p>Using {display:block;} to make a <span class="blockMe">span (inline) element</span> display as a block element!</p>
		<p>Now using {display:inline;} to make block &lt;li&gt; elements display like inline elements:</p>
			<ol>
				<li>Honda</li>
				<li>Yamaha</li>
				<li>Ducati</li>
			</ol>
	</body>
</html>

 

Save & refresh browser:

This first list has the display property set as none: 

So it won't be displayed!

 

Using {display:block;} to make a

span (inline) element

display as a block element!

 

Now using {display:inline;} to make block <li> elements display like inline elements:

  1. Honda
  2. Yamaha
  3. Ducati

Leave a Reply