The 'Display' property is used for visual representation of HTML elements. The most fundamental types of display are inline, block-line and none and they can be manipulated with the 'display' property and the values inline, block and none.
inline : Elements that are displayed inline follow the flow of a line. Strong, anchor and emphasis elements are traditionally displayed inline. For example
#title {
display : inline;
color : blue;
}
#desc {
display : inline;
color : black;
}
The HTML elements with id 'title' and 'desc' will display next to each other.
block : puts a line break before and after the element. Header and paragraph elements are examples of elements that are traditionally displayed block-line. For example
#title {
display : block;
color : blue;
}
#desc {
display : block;
color : black;
}
The HTML elements with id 'title' and 'desc' will display above and below to each other.
none : It doesn't display the element, which may sound pretty useless but can be used to good effect with accessibility considerations , alternate stylesheets or advanced hover effects. For example
#title {
display : none;
color : blue;
}
The HTML element with id 'title' will not display in browser.
Difference between display and visibility :
The display and visibility property behaves differently in browser. The 'display: none' and 'visibility: hidden' vary in that 'display: none' takes the element completely out of play, where as 'visibility: hidden' keeps the element and its flow in place without visually representing its contents. For example
<p> This is first paragraph. </p>
<p style="display:none;"> This is second paragraph. </p>
<p > This is third paragraph. </p>
Above code will display the first and third paragraph above and below to each other. If you remove the display:none; from second paragraph then there will be some re-arrangement done with HTML elements. Third paragraph will move down and there will be shown some text between first and third paragraph.
<p> This is first paragraph. </p>
<p style="visibility:hidden;"> This is second paragraph. </p>
<p > This is third paragraph. </p>
Above code will display first and third paragraph above and below to each other. But there will be a gap between them, This gap is equal the size of second paragraph. If you remove visibility:hidden; from second paragraph then you will see the text in place of gap. No HTML element re-arrangement will be done.
Other display types :
There are some other types of display that you can use with HTML elements. These are
list-item : It displays as in the way that you would usually expect an li HTML element.
run-in : It makes an element either in-line or block-line depending on the display of its parent. It doesn't work on IE and Mozilla.
compact : It makes the element inline or block-line depending on the context.
marker : It is used exclusively with the :before and :after pseudo elements to define the display of the value of the content property. The automatic display of the content property is already marker, so this is only useful if you are overriding a previous display property for the pseudo element.
No comments:
Post a Comment