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
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>