HTML行内元素、块级元素和行内块元素

行内元素

HTML (超文本标记语言) 元素大多数都是行内元素或块级元素。一个行内元素只占据它对应标签的边框所包含的空间。行内元素依靠自己的字体大小或者是图像大小来支撑结构， 一般不可以设置宽度，高度以及对齐等属性。默认的宽度就是他本身的宽度。

<p>
This <span>span</span> is an inline element;
its background has been colored to display both 
the beginning and end of the inline element's influence
</p>

<style>
    span { background-color: #8ABB55; }
</style>

常见的行内元素

<a>	锚元素
<abbr>	缩写元素
<bdo>	双向文本替代元素
<button>	点击按钮
<b>	粗体元素
<br>	换行符号
<cite>	引用元素
<code>	呈现一段计算机代码
<dfn>	标记被定义的术语
<em>	斜体元素(表示强调)
<i>	斜体元素(不建议使用)
<img>	图像嵌入元素
<input>	表单输入元素
<kbd>	键盘输入元素
<label>	界面中某个元素的说明
<map>	定义一个图像映射
<object>	嵌入对象元素
<q>	引用短的文本
<samp>	标识计算机程序输出
<select>	提供选项菜单的控件
<script>	嵌入或引用可执行脚本
<span>	短语内容的通用行内容器
<sub>	改变文本的位置
<sup>	改变文本的位置
<small>	使文本的字体变小一号
<strong>	粗体显示
<textarea>	多行纯文本编辑控件
<var>	变量名称

注：<big>  <tt>  <acronym>  已被HTML5弃用

块级元素

块级元素占据其父元素（容器）的整个水平空间，垂直空间等于其内容高度，因此创建了一个“块”。通常浏览器会在块级元素前后另起一个新行。块级元素可以自由的设置宽度和高度。

<p>
This paragraph is a block-level element; 
its background has been colored to display 
the paragraph's parent element.
</p>

<style>
    p { background-color: #8ABB55; }
</style>

常见的块级元素

<address>	联系方式信息
<article>	文章内容
<aside>	伴随内容
<blockquote>	块引用
<dd>	定义列表中定义条目描述
<div>	文档分区
<dl>	定义列表
<fieldset>	表单元素分组
<figcaption>	图文信息组标题
<figure>	图文信息组
<footer>	区段尾或页尾
<from>	表单
<h1> ~ <h6>	标题
<header>	区段头或页头
<hgroup>	标题组
<hr>	水平分割线
<li>	列表项目
<ol>	有序列表
<p>	段落
<pre>	预格式化文本
<section>	一个页面区段
<table>	表格
<tbody>	表格主体
<td>	表格中的标准单元格
<tfoot>	表格的页脚
<th>	表头单元格
<thead>	表格的表头
<tr>	表格中的行
<ul>	无序列表

 行内块元素

行内块具有行内与块级元素的特点，可以相互转化，常见的行内块标签<img />、<input />、<td>。

类型转化 

• 转换为块元素：display:block;
• 转换为行内元素：display:inline;
• 转换为行内块：display: inline-block;

HTML的元素嵌套关系 

• 块级元素可以包含行内元素。
• 块级元素不一定可以包含块级元素 。比如div中可以包含div，但是p中不能包含div。
• 行内元素一般不能包含块级元素。比如span中不能包含div。但是a中却可以包含div。

备注：HTML5中 a > div 是合法的，但是 div > a > div 是不合法的，但是在HTML4.0.1中 a > div 仍然是不合法的。

●inline-block和block的唯一区别就是，不独占一行。

●行内元素的padding-top、 padding-bottom、 margin-top、 margin-bottom属性设置是无效的

●行内元素的padding-left、padding-right、 margin-left、 margin-right属性设置是有效的

●行内元素的padding-top、padding-bottom从 显示的效果上是增加的,但其实设置的是无效的。并不会对他周围的元素产生任何影响。

注：以上标签的具体用法与含义请参考MDN，MDN Web Docs (mozilla.org) 。