Control appearance and positioning

Display (block, inline, none)

How HTML elements are displayed can be changed with CSS rules.

The rules that can change these HTML elements are:

  • block
  • inline
  • none

The default display setting for most elements is block or inline:

  • display:block – an element uses the entire width of its container
  • display:inline – an element uses only as much width as necessary
  • display:none – an element is not visible

Example of display:block

An example of a div element, which shows a text box stretching across the entire width of a web page.

Code for the above block:

<div id="block" style="display:block; border: 1px solid green;height:100px"> <p>div can be used as a block element. A block element starts on a new line on the webpage and stretches the entire width of the page</p></div>

Example of display:inline

<span> can be used as an inline element. Inline elements will wrap text inside a paragraph. (Like word wrap in a word processor). The following words have an inline element.

Code for the above inline element:

<html> <head> <style> p {color: red;} p.example {display: inline;} </style> </head> <body> <h1>display: inline:</h1> <span> span can be used as an inline element. Inline elements will wrap text inside a paragraph. (Like word wrap in a word processor). The following words <p class="example">have an inline element</p> </span> </body> </html>

Example of display:none

When display is set to none, you can make text disappear!

Code for the above HTML/CSS:

<html> <head> <style> p.example {display: none;} </style> </head> <body> <h1>display: none:</h1> <span> When display is set to none, you can make text disappear! <p class="example">This text is invisible!</p> </span> </body> </html>