CSS Properties: Display explanation

Display is defined on the world-class: The Display property specifies the type of box that the element should generate.

Display has a lot of values, here in detail Block,inline-block,inline,table-cell.

Block: This element will be displayed as a block-level element with a newline character before and after this element

Inline: Default. This element is displayed as an inline element with no line break before or after the element.

Inline-block: inline block element. (CSS2.1 new value)

Table-cell: This element is displayed as a table cell (similar to <td> and <th>)

Block Elements ( i.e. default Display:block) is characterized by:  

· Always start on a new line;

· The contents of the object are then automatically wrapped;

· Height, row height and top and bottom margin can be controlled;

· The width defaults to 100% of its container unless a width is set

<div>, <p>,

Example 1. For the use of block, an edit box, the theme is textarea, below is a div, you can resize, to achieve textarea and div seamless connection, then will set the value of textarea: Display: block, the default value of inline will make a gap between textarea and DIV (ah ah ah, do not know for God horse here no difference, my own project, such as)

Plus display:block.

The ideal look:

HTML code

<DivID= "Mystage"><textareastyle= "width:300px; height:150px;"></textarea><Divstyle= "background: #eee url (' http://pixelbread.hk//misc/grippie.png ') no-repeat center 2px; height:9px; width:300px;" >&nbsp;</Div><BR/><BR/>    <textareastyle= "display:block; width:300px; height:150px;"></textarea><Divstyle= "background: #eee url (' http://pixelbread.hk//misc/grippie.png ') no-repeat center 2px; height:9px; width:300px;" >&nbsp;</Div></Div>

In my local writing display effect:

Don't know how on the blog is not the same.

<textarea style="width: 300px; height: 150px;"></textarea>

<textarea style="display: block; width: 300px; height: 150px;"></textarea>

Example 2. HTML corresponding to the use of code:

<class= "Divcss"> My back text wraps </span>  I was wrapped by the previous divcss corresponding to the CSS property.  <span> won't be wrapped because I'm not set Display:block</span >

The inline element (that is, the default display:inline) is characterized by:

· And the other elements are on one line;

· Height, row height and top and bottom margin can not be changed;

· Width is the width of the text or picture, and it cannot be changed.

<span>, <a>, <label>, <input>, , <strong> and <em> are examples of inline elements

Display:inline, we often use it in Li. function is to make Li into a row (called Delete row)

CSS Properties: Display explanation