Detailed Display properties in CSS (inline and block-level elements)

Display Properties

First, the attributes are supported by all major browsers display . Second, we all know the display type of box that the attribute specifies that the element should generate. Default value:inline

The display property values we use are:

1. inline
2. block
3. inline-block
4. none

displayset to none not preserve the space that the element should display, but visibility: hidden it will remain.

So, display : display What's the difference between inline,:block and display :inline-block ?

<Style>. inline{Display:inline;Width100px;Height100px;Padding5px;Background-color:#F00;}. block{Display:block;Width100px;Height100px;Padding5px;Background-color:#0f0;}. inline-block{Display:inline-block;Width100px;Height100px;Padding5px;Background-color: #00f;} </style>< body><span class= "inline" >inline</span>inline<span class= "block" >block</span> block<span class = "Inline-block" >inline-block</ Span>inline-block</BODY>      

View results:

Inline properties

We find that inline objects inline give it properties height and width are useless, causing it to widen and grow larger.
Reason is

内部元素的宽高`+padding`。观察inline对象的前后元素我们会发现`inline`不单独占一行，其它元素会紧跟其后。

Block properties

而块对象`block`是可以设置宽高的，但是它的实际宽高是本身宽高`+padding`。观察`block`的前后元素我们会发现`block`要单独占一行。

But what if we need a div with a wide height and don't want it to be exclusive?

Inline-block characteristics

This time we need to use inline-block , and then look at the above demo, we will find:

inline-block既具有block的宽高特性又具有inline的同行元素特性。

That is, when we want to have an element that does not have a single row and can set its width and Height properties, we can choose inline-block .

However, the width and height of the Ie6/7 padding inline is not affected by it.

As a result, we can associate inline and block-level elements .

Features in-line elements

1、和其他元素都在一行上；2、元素的高度、宽度、行高及顶部和底部边距不可设置；3、元素的宽度就是它包含的文字或图片的宽度，不可改变。 

Block-level element features

1、每个块级元素都从新的一行开始，并且其后的元素也另起一行。（真霸道，一个块级元素独占一行）2、元素的高度、宽度、行高以及顶和底边距都可设置。3、元素宽度在不设置的情况下，是它本身父容器的100%（和父元素的宽度一致），除非设定一个宽度。

In HTML, it <span>、<a>、<label>、<input>、 、 <strong> 和<em> is the typical inline element.

Block-level elements can be set to a wide height, but the actual width of its height is itself wide and high +padding. The block element has a separate row. Inline elements are not exclusive to a single line, and it is useless to set a wide height for him.

In HTML, it <div>、 <p>、 is a block-level element. display:blockthe setting is to display the element as a block-level element. The code below is to convert the inline element A into a block element, using the a element from the page with a block element feature.

a{display:block;}

So, display what about the other property values?

list-itemThis element is displayed as a list.

run-inThis element is displayed as a block-level element or inline element, depending on the context.

compactThere is a value compact in CSS, but it has been removed from CSS2.1 due to a lack of broad support.

markerThe CSS has a value of marker, but it has been removed from the CSS2.1 due to a lack of broad support.

tableThis element is displayed as a block-level table (like table) with a newline character before and after the table.
inline-tableThis element is displayed as an inline table (like table) with no line breaks before or after the table.
table-row-groupThis element is displayed as a grouping of one or more rows (similar to tbody)
table-header-groupThis element is displayed as a grouping of one or more rows (similar to thead)
table-footer-group：This element is displayed as a grouping of one or more rows (similar to tfoot)
table-rowThis element is displayed as a table row (similar to TR).
table-column-groupThis element is displayed as a grouping of one or more columns (similar to Colgroup).
table-columnThis element is displayed as a cell column (similar to col)
table-cellThis element is displayed as a table cell (similar to TD and TH)
table-captionThis element is displayed as a table header (similar to caption)

Inline and block-level elements

Detailed Display properties in CSS (inline and block-level elements)