Display
2012/05/20 Css resources, examples & tutorials for webmasters and online professionals
Display
img{ display: none; } The display tag is an important but sometimes difficult to understand css tag.
To understand the display concept as used in most browsers it is important to understand the difference between these 3 options:
display: none this will display nothing. When using this the space that this elements normally uses (with / height) is not used.
display:block after a block element is always a line-break.
display:inline there is no line break after this element.
The display option can be manually assigned to an element, but each element also has a default value. Elements like <b> <i> <u> <a> <span> are inline, while <p> <ul> <li> <div> are block elelement. This means that after bold text there will obviously be no line break, unless we assign display:block to the <b> element.
Examples
<p>This is a <b>bold text</b> that does not break because bold is an inline element</p>
This is a bold text that does not break because bold is an inline element
<p>This is a <b style="display:block">bold text</b> that does break because the bold element has been changed to a block element</p>This is a bold text that does break because the bold element has been changed to a block element
Leave a reply.