Open main menu

CDOT Wiki β

Changes

CSS GUIDE DISPLAY

376 bytes added, 01:28, 27 September 2011
m
no edit summary
This property specifies the type of rendering box used for an element. In a language such as HTML where existing elements have well-defined behavior, default 'display' property values are taken from behaviors described in the HTML specifications or from the browser/user default stylesheet. In languages where display behavior is not defined (like XML), the default value is 'inline'.
In addition to the many different allowed display box types, one other value, "none", allows the display of an element to be turned off; all child elements also have their display turned off. The document is rendered as though the element did not exist in the document tree. This value allows for powerful capabilities, but should be used with caution.
== Syntax ==
<pre>
p { display: value }
</pre>
== Legal Values ==
'''marker'''
* This causes an additional marker box to be generated along with the content box. Generated content using the :before and :after pseudo-elements with this display value will place content in the marker box. If a marker is used with another type of element, the value is treated as "in-line." The position of the marker will lie outside the block box.
'''compact'''
== Usage Examples ==
<pre>
Ext/Doc: p { display: block }
In-Line: <p STYLE="display: block">text</p></pre>
== Notes ==
* CSS1 Conformance: browsers may legally ignore the 'display' property and instead use browser defaults for each element.
* In CSS1 the default value for this property was "block." In CSS2 it has been changed to "inline".
==== "Block" Versus "In-line" Elements ====
* '''Block-level elements''' create vertically distinct blocks of content (in the visual context) - generally using a line-break before and after the content. Only this value for the 'display' is allowed to generate a positioned element. Block behavior is exhibited by such HTML elements as BLOCKQUOTEs, DIVs and Headings. 'Display' property values creating a block element type: 'block', 'list-item', 'table, 'compact' and 'run-in'
* '''In-line elements''' do not create distinct blocks of content; element content is rendered using a line box (content &lt;span class=&quot;plainlinks&quot;&gt;[http://www.thepiggybackrider.com/ &lt;span style=&quot;color:black;font-weight:normal; text-decoration:none!important; background:none!important; text-decoration:none;/*CITATION*/&quot;&gt;child carrier&lt;/span&gt;]&lt;/span&gt; <span class="plainlinks">[http://www.thepiggybackrider.com/ <span style="color:black;font-weight:normal; text-decoration:none!important; background:none!important; text-decoration:none;/*CITATION*/">child carrier</span>]</span> is distributed line by line within a containing physical or virtual block element.) In-line behavior is exhibited by such HTML elements as physical and virtual character formatting, non-floated images and unmarked content. 'Display' property values creating an in-line element type: 'inline', 'inline-table', 'compact' and 'run-in'.
== Specification Conformance ==
1
edit