Inline elements and block element

Inline elements (inline)

• 内联元素(inline)Not on a separate line, adjacent inline elements will be ranked on the same line. Its width varies with the content.
• Inline element width and height can not be set
• Inline element can be set margin, padding, but only valid in the horizontal direction.

Common inline elements

<a></a>
<img></img>
<iframe>
    
</iframe>
<span></span>
<font></font>
....

Block element (block)

• Block elements will be on a separate line, the width of the width of its parent element filled automatically default
• Wide block elements can be set high
• Block elements may be provided margin, padding

Common block element

<div>
    
</div>
<h1>
    
</h1>
<p>
    
</p>
<form>
    
</form>
...

Inline block elements (inline-block)

Is also have the characteristics of inline elements, the block elements, the code display:inline-blockis set to the inline element block element.

• And other elements on one line;
• Height, width, line height, and a top margin and a bottom element can be set.

注意：

• Block-level elements are mainly used for layout, inline elements of the page is mainly used to select the text style setting.

• Normally only use block-level element comprising inline elements, instead of using the inline element to comprise a block element.

• aElement can contain any elements, in addition to its own

• p元素It can not contain any other块级元素

The difference between each other

1. Block elements will be on a separate line, and inline elements and inline block elements are displayed in a row.
2. Block elements and block element may be disposed inline width, heightproperties, and set invalid inline elements.
3. Block-level elements widthdefault is 100%, while the inline element width is determined according to its own content or sub-element.

Conversion

About convert between block-level elements and inline elements we can use cssto resolve, future use CSS attributes this difference block elements and inline elements do not become a difference.

For example, we can add the inline element display:blocksuch properties, it also has attributes each time starts a new row of blocks becomes the same elements block elements we can add display:inlinesuch properties, it is also aligned in a row .

display:inline

display:inline: Inline display the converted fast inline elements along with element characteristics inline element tag.

display:block

display:block: Shown as a block, so that elements to an inline block elements also have the feature block element tag.

<div style="display:inline">块变内联</div>
<span style="display:block">内联变块</span>