Home > Developer > Web Develop

Display properties of CSS

Source: Internet
Author: User
Developer on Alibaba Coud: Build your first app with APIs, SDKs, and tutorials on the Alibaba Cloud. Read more ＞

Original link: http://www.cnblogs.com/xieon1986/articles/1424022.html

In the Display property:
Block: Block display, add line breaks after elements, meaning other elements cannot be displayed side by side.
Inline: inline displays a line break after the element, and multiple elements can be displayed side-by-side in a row.

Focus:
Browser compatibility table for display properties and usage details

The CSS property is used to set how the object is displayed.

Value: Block | none | inline | Inline-block | List-item | Table-header-group | Table-footer-group | Inherit

Available values Description of the value
Block Displayed as block type elements.
None The default value. Appears as an element type in the row.
Inline-block appears as an inline element, but its contents are displayed like a block type element.
List-item Display as a block type element and add a style list tag.
Table-header-group Appears before any table row and row combination, after the head header.
Table-footer-group Appears after any table row and row combination, before the bottom header.

The default values for display of all elements are inline except for the following elements:

Elements Display property value
ADDRESS Block
BLOCKQUOTE Block
BODY Block
CENTER Block
COL Block
Colgroup Block
Dd Block
DIR Block
Div Block
Dl Block
Dt Block
FieldSet Block
FORM Block
FRAME None
Hn Block
HR Block
Iframe Block
LEGEND Block
LI List-item
LISTING Block
MARQUEE Block
MENU Block
Ol Block
P Block
PlainText Block
PRE Block
TABLE Block
TBODY None
Td Block
TFOOT None
TH Block
THEAD None
Tr Block
Ul Block
XMP Block

All visible HTML objects are block or inline. For example, a Div object is a block element, and a span object is an inline element. The block element has another row and can contain other block elements and inline elements. The inline element does not have another row, and the inline element contains other inline elements or data. Changing the display element affects the surrounding content:

    • Sets the element to block, and wraps the element after it.
    • Setting an element to inline will eliminate the element wrapping.
    • Set the element to none to hide the element content.

When the display value is set to none, the space occupied by the element is eliminated by comparing the visibility property.

Sample code

div {display:none;}

The following code shows the difference between block, inline, none in the display property.

<body>

<p ><span id= "Ospan" style= "" >this are a span</span> in a sentence.</p>

<P>

<input Type=button value = "inline" onclick = "ospan.style.display= ' inline '" >

<input Type=button value= "block" onclick = "ospan.style.display= ' block '" >

<input type =button value= "None" onclick= "Ospan.style. display= ' None ' >

</P>

</body>

Demo Example

Reference:
Http://www.dhucst.com/supesite/html/33/t-233.html
Http://www.blabla.cn/html_ref/css_attrs/display.html

(go) Display properties of CSS

This article is an English version of an article which is originally in the Chinese language on aliyun.com and is provided for information purposes only. This website makes no representation or warranty of any kind, either expressed or implied, as to the accuracy, completeness ownership or reliability of the article or any translations thereof. If you have any concerns or complaints relating to the article, please send an email, providing a detailed description of the concern or complaint, to info-contact@alibabacloud.com. A staff member will contact you within 5 working days. Once verified, infringing content will be removed immediately.

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

  • Sales Support

    1 on 1 presale consultation

    Chat Contact Sales

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

    Open a Ticket

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

    Learn More