Another way to override the default display value of any element is to use display: block;. Do take note that setting the display property of an element only changes how the element is displayed, NOT what kind of element it is. So, an inline element with display: block; is not allowed to have other block elements inside it.
The following example displays <span> elements as block elements:
| HTML file: | Displayed by browser: |
|---|---|
|
<style>
span {
display: block; } </style> <body> <p><b>Example 1:</b></p> <span> A display property <span>with a value</span> of "block" results in line breaks between the three elements.</span> <hr /> <p><b>Example 2:</b></p> <span>A display property with a value of "block" results in</span> <span>a line break between the two elements.</span> </body> |
Example 1: A display property with a value of "block" results in line breaks between the three elements.Example 2: A display property with a value of "block" results in a line break between the two elements. |
Note: The first example is bad coding because there is a span element inside another span element. The second example is the correct way to use block elements.
