Value |
Description |
inherit |
Explicitly sets the value of this property to that of the parent. |
none |
The element box is not floated. |
left |
The current element box will be floated to the left. Subsequent content flows around it to the right, starting at the top of the element box If this value is given, the ‘display’ property for the current element is ignored, unless it has the value ‘none’. |
right |
The current element box will be floated to the right. Subsequent content flows around it to the left, starting at the top of the element box If this value is given, the ‘display’ property for the current element is ignored, unless it has the value ‘none’. |
Value |
Description |
inherit |
Explicitly sets the value of this property to that of the parent. |
static |
This is the default positioning scheme, where elements are rendered in order, as they appear in the document flow. The ‘top’, ‘left’, ‘right’ and ‘bottom’ properties have no effect if this value is set. |
relative |
The element’s normal document flow position is calculated as if the element had a ‘position’ value of ‘static’. It is then offset from this position according to the ‘top’ and ‘left’ properties. Any elements that come after this element will be laid out as if the element had not been offset (a phantom height and width for the element is reserved in the normal document flow.) |
absolute |
This specifies that the element box be absolutely positioned using the ‘top’, ‘left’, ‘right’ and ‘bottom’ properties. These values use the element box’s containing block as origin. Absolutely positioned elements do NOT exist in the normal document flow like relatively positioned elements are – elements that follow will flow as if the absolutely positioned element does not exist. |
fixed |
This value behaves like ‘absolute’ in all respects, but additionally, the positioned element box is fixed with respect to a reference point. In scrolling media, it is in reference to some fixed point on the screen; in paged media (printing) it will be in reference to a point on the page. The positioned element will not move with respect to that stationary point (eg, it will not moved when, say, the screen is scrolled.) |
Value |
Description |
inherit |
Explicitly sets the value of this property to that of the parent. |
none |
This value turns off the display of an element (it has no effect on layout); all child elements also have their display turned off unconditionally. The document is rendered as though the element did not exist in the document tree. To render an element box’s dimensions in the document formatting scheme, yet have its contents be invisible, see the ‘visibility’ property. |
inline |
This causes the element to generate one or more inline element boxes. |
block |
This causes the element to generate a block element box. |
inline-block |
Introduced in CSS 2.1. This causes the element to generate a block element box that will be flowed with surrounding content as if it were an single inline box (behaving much like a replaced element would.) |
list-item |
This causes the element to generate a block box for the content and a separate list-item inline box. |
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 |
Depending on context, this value for the display property creates either an in-line or block level rendering box. In each case different CSS properties may apply to the compact element. In a block level context, the compact element is rendered in the left or right margin of the block element. The compact element participates in line-height calculations for the current line, and the ‘vertical-align’ property value is relative to the block element. |
run-in |
Depending on context, this value for the display property creates either an in-line or block level rendering box. In each case different CSS properties may apply to the run-in element. Properties for the run-in element are inherited from its parent element in the document tree, not from the block element box it participates in. |
[table-header-group|table-footer-group] |
These values cause the element to behave like the corresponding THEAD and TFOOT HTML table elements which these values take their name from. |
table |
These values cause the element to behave like the corresponding HTML table element which these values take their name from. The ‘inline-table’ value does not have a direct mapping in HTML. |
inline-table |
These values cause the element to behave like the corresponding HTML table element which these values take their name from. The ‘inline-table’ value does not have a direct mapping in HTML. |
table-caption |
These values cause the element to behave like the corresponding HTML table element which these values take their name from. The ‘inline-table’ value does not have a direct mapping in HTML. |
table-cell |
These values cause the element to behave like the corresponding HTML table element which these values take their name from. The ‘inline-table’ value does not have a direct mapping in HTML. |
table-row|table-row-group |
These values cause the element to behave like the corresponding HTML table element which these values take their name from. The ‘inline-table’ value does not have a direct mapping in HTML. |
table-column|table-column-group |
These values cause the element to behave like the corresponding HTML table element which these values take their name from. The ‘inline-table’ value does not have a direct mapping in HTML. |