What are the inline and block-level elements?

I. What are the inline and block-level elements?

Block-level elements

<address>	Information on author
<blockquote>	Long quotation
<button>	Push button
<caption>	Table Caption
<dd>	Definition description
<del>	Deleted text
<div>	Generic Language/style Container
<dl>	Definition List
<dt>	Definition term
<fieldset>	Form control Group
<form>	Interactive form
	Heading
	Heading
	Heading
	Heading
	Heading
	Heading
	Horizontal Rule
<iframe>	Inline Subwindow
<ins>	Inserted text
<legend>	FieldSet legend
<li>	List item
<map>	Client-side image Map
<noframes>	Alternate content container for non frame-based rendering
<noscript>	Alternate content container for non script-based rendering
<object>	Generic embedded object
<ol>	Ordered list
<p>	Paragraph
<pre>	preformatted text
<table>	Table
<tbody>	Table Body
<td>	Table Data Cell
<tfoot>	Table Footer
<th>	Table Header Cell
<thead>	Table header
<tr>	Table row
<ul>	Unordered list

In-line elements

<a>	Anchor
<abbr>	Abbreviated form
<acronym>	Acronym
<b>	Bold text Style
<bdo>	i18n BiDi over-ride
<big>	Large Text Style
<br>	Forced line break
<button>	Push button
<cite>	Citation
<code>	Computer code Fragment
<del>	Deleted text
<dfn>	Instance definition
<em>	Emphasis
<i>	Italic Text Style
<iframe>	Inline Subwindow
	Embedded image
<input>	Form Control
<ins>	Inserted text
<kbd>	Text to is entered by the user
<label>	form Field Label text
<map>	Client-side image Map
<object>	Generic embedded object
<q>	Short inline quotation
<samp>	Sample program output, scripts, etc.
<select>	Option Selector
<small>	Small Text style
<span>	Generic Language/style Container
<strong>	Strong emphasis
<sub>	Subscript
<sup>	Superscript
<textarea>	Multi-line text field
<tt>	Teletype or monospaced Text style
<var>	instance of a variable or program argument

Two. What is the difference between an inline element and a block-level element?

1. Dimensions-an important difference between block-level elements and inline elements

inline element and Width

The CSS2 standard specifies that inline elements, non-permutation elements do not apply the Width property.

In the following example, width:200px is applied to the inline element <a>, as you can see, there is no effect at all.

inline element and Height

The CSS2 standard specifies that inline elements, non-permutation elements do not apply the Height property, but the box height can be specified by Line-height.

In the following example, height:50px is applied to the inline element <a>, you can see what effect is not.

Inline elements and Padding

You can set padding for inline elements, but only padding-left and padding-right take effect.

In the following example, inline elements <a> padding:50px are applied. You can see the effects on the content, but not on the top or bottom.

Inline elements and marging

The margin property is also the same as the Padding property, which is valid around the element in the row and is not valid up or down.

The following example applies the margin:50px to <a>, and you can see that the left and right edges are in effect but the content is not up or down.

Remember to inline elements

Setting width is not valid.
Setting height is invalid and can be set by Line-height.
Setting margin is only valid for margin, upper and lower invalid.
Set padding only left and right padding valid, upper and lower is invalid. Note that the range of elements is increased, but the content around the element is not affected, see the effect on the picture will know

Part of the above translation from: http://www.maxdesign.com.au/presentation/inline/

The 2.text-align attribute is the difference between the two.

In the CSS2.1 specification section 16.2, the text-align is described in detail:
------------------------------------------
Value: Left | Right | Center | Justify | Inherit
Initial value: Anonymous value, determined by the value of ' direction ', if ' direction ' is ' ltr ' then ' left ', if ' direction ' is ' RTL ' then ' right '.
Applies To: block-level elements, table cells, inline block elements
Inheritance: Yes
Calculated value: Initial value or specified value
------------------------------------------

This feature describes how to make an element of a blockin-line contentaligned.
Note that the standard says this attribute is used to alignin-line contentof, So,NoShould work on block-level content.
Explain,in-line contentis said byin-line elementsThe contents of the composition, in-line elements everyone knows, such as the span element, the IFRAME element and the element style ' display:inline ' are all inline elements;block-level contentThe following is composed of block-level elements, which are the most commonly used block-level elements. The difference between block-level elements and inline elements is that block-level elements appear on one line, while inline elements can be displayed side-by-row.
In this way, our understanding of this feature should be clear. However, the problem comes, although the standard is so stipulated, then is not all browsers adhere to it? The answer is in the negative. Guess which browser is so maverick? Ie!!
in IE6/7 and IE8 promiscuous mode, the Text-align:center can align block-level elements as well. In other browsers, Text-align:center is used only on inline content.
The better way to solve this problem is to set "Margin-left:auto;margin-right:auto" for all block-level elements that need to be centered relative to the parent container. However, this is not supported in promiscuous mode IE6/IE7/IE8, so also set the parent container's "text-align:center;".

If the inline content within the center-aligned child element does not need to be center-aligned, you also need to set the text-align:left for it:

What are the inline and block-level elements?