HTML内联元素和块级元素

HTML 标签（元素）可以分为两个类别，分别是块级元素和内联元素（也叫行内元素）。

一、内联元素（inline）

1. 内联元素的概念

内联元素(html规范中的概念)英文:inline element，其中文叫法有多种，如：内联元素、内嵌元素、行内元素、直进式元素等。基本上没有统一的翻译。另外提到内联元素，通常会涉及到的属性是display:inline;这个属性能够修复著名的IE双倍浮动边界问题。

2. 内联元素的特性

①和相邻的内联元素在同一行;

②宽度(width)、高度(height)、内边距的top/bottom(padding-top/padding-bottom)和外边距的top/bottom(margin-top/margin-bottom)都不可改变;

③宽度就是它的文字或图片的宽度，不可改变

④内联元素只能容纳文本或者其他内联元素

对于行内元素的使用，需要注意如下几点：

• 设置宽度 width 无效；

• 设置高度 height 无效，但可以通过 line-height 来设置行高；

• 可以设置 margin 外边距，但只对左右外边距有效，上下无效；

• 设置 padding 内边距时，只有左右 padding 有效，上下则无效，需要注意的是元素范围是增大了，但是对元素周围的内容是没影响的；

• 可以通过 display 属性将元素在行内元素和块级元素之间进行切换。

3. HTML标签中常见的内联元素

二、块级元素（block）

1. 块级元素的概念

块级元素(block element)，和其对应的是内联元素(inline element)，都是html规范中的概念。块元素和内联元素的基本差异是块元素一般都从新行开始，相邻的块级元素将会在不同行显示。

2. 块级元素的特性

①总是独占一行，表现为另起一行开始，而且其后的元素也必须另起一行显示;

②宽度(width)、高度(height)、内边距(padding)和外边距(margin)都可控制;

③如果省略块级元素的宽度，那么它的宽度默认为当前浏览器窗口的宽度；

④块级元素中可以包含其它的内联元素和块级元素。

3. HTML标签中常见的块级元素