HTML中行内元素与块级元素有哪些及区别 （网易博客）

一.行内元素和块级元素有哪些？

块级元素<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<h1>heading<h2>heading<h3>heading<h4>heading<h5>heading<h6>heading<hr>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行内元素<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<img>Embedded image<input>form control<ins>inserted text<kbd>text to be 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

大家可以发现，上面有些元素有重复，为什么呢，是因为HTML中存在可变元素。
可变元素为根据上下文语境决定该元素为块元素或者内联元素。
　　◎ applet - java applet
　　◎ button - 按钮
　　◎ del - 删除文本
　　◎ iframe - inline frame
　　◎ ins - 插入的文本
　　◎ map - 图片区块(map)
　　◎ object - object对象（当浏览器不支持时，则显示为块级）
　　◎ script - 客户端脚本 
但是就我个人而言，我更愿意把它们当做行内元素，因为一般情况下，不会解释为块级元素

二.行内元素与块级元素有什么不同？

块级元素和行内元素的区别是，块级元素会占一行显示，而行内元素可以在一行并排显示。

通过样式控制，它们可以相互转换。

1.尺寸-块级元素和行内元素之间的一个重要的不同点

设置宽度width 无效。
设置高度height 无效，可以通过line-height来设置。
设置margin 只有左右margin有效，上下无效。
设置padding 只有左右padding有效，上下则无效。

注：这里说的无效， 是指，它对其它元素的排列没有影响。也就是说，对于设置的margin,padding行内元素文档流里的上下元素来说，他们的间距不会因为上下margin或者上下padding而产生间距。但是就他本身而言，对于上下margin与padding是有效的。

上面写的有点绕了，我也是尽量表达。请参照下图，如果还是不清楚，请动手自己写一下，就能明白了。

 

2.text-align属性是两者表现的又以不同之处

这个特性描述了如何使一个块元素的行内内容对齐。
注意一点，w3c标准里说这个属性是用来对齐行内内容的，所以，不应该对块级内容起作用。
解释一下，行内内容是说由行内元素组成的内容，
这样，我们对这个特性的认识应该就清楚了。但是，问题来了，虽然标准里这么规定，那么是不是所有浏览器都遵守呢？答案是否定的。啊？ 又是IE！！
IE6/7及IE8混杂模式中，text- align:center可以使块级元素也居中对齐。其他浏览器中，text-align:center仅作用于行内内容上。