丸子妹

HTML中块级元素和行内元素（又叫内联元素）

转载一篇阿秋阿邱的博客作为记录
HTML中块级元素和行内元素的总结和区分。
还参考了一下Qingqiu_Gu和晴天神乐的博客的内容
块级元素和行内元素
详解css中的display属性（行内元素和块级元素）

块级元素和行内元素的定义

块级元素？

总是在新行上开始；
高度，行高以及外边距和内边距都可控制；
宽度缺省是它的容器的100%（和父元素的宽度一致），除非设定一个宽度。
它可以容纳内联元素和其他块元素

行内元素？

和其他元素都在一行上；
宽度就是它的文字或图片的宽度，不可改变
内联元素只能容纳文本或者其他内联元素

对行内元素，需要注意如下：

设置宽度width 无效。
设置高度height 无效，可以通过line-height来设置。
设置margin 只有左右margin有效，上下无效。
设置padding 只有左右padding有效，上下则无效。注意元素范围是增大了，但是对元素周围（上下）的内容是没影响的。

在html中，、、、、、和就是典型的行内元素（inline）元素。
块级元素是可以设置宽高的，但是它的实际宽高是本身宽高+padding。block元素要单独占一行。内联元素不单独占一行，给他设置宽高是没有用的。
在html中

、
、
、
、
和
就是块级元素。设置display:block就是将元素显示为块级元素。

块级元素和行内元素的分类

在HTML的角度来讲，标签分为：

文本级标签：p , span , a , b , i , u , em

容器级标签：div , h系列 , li , dt ,dd

p：里面只能放文字和图片和表单元素，p里面不能放h和ul，也不能放p。
　　　　
　从CSS的角度讲，CSS的分类和上面的很像，就p不一样：

行内元素：除了p之外，所有的文本级标签，都是行内元素。p是个文本级标签，但是是个块级元素。

块级元素：所有的容器级标签，都是块级元素，以及p标签。

　　　　
html中的块级元素：

标签描述

定义地址。

定义文章。

定义页面内容之外的内容。

定义声音内容。

定义长的引用。

定义图形。

定义表格标题。

定义定义列表中项目的描述。

定义文档中的节。

定义定义列表。

定义定义列表中的项目。

定义元素的细节。

定义围绕表单中元素的边框。

定义 figure 元素的标题。

定义媒介内容的分组，以及它们的标题。

定义 section 或 page 的页脚。

定义供用户输入的 HTML 表单。

to
定义 HTML 标题。

定义 section 或 page 的页眉。

定义水平线。

定义 fieldset 元素的标题。

定义列表的项目。

定义命令的列表或菜单。

定义预定义范围内的度量。

定义导航链接。