行内元素

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>

注：<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>

行内块元素

行内块具有行内与块级元素的特点，可以相互转化，常见的行内块标签<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 ()。