html中的标签元素大体被分为三种不一样的类型：块状元素、内联元素(又叫行内元素)和内联块状元素。那么块状元素和内联元素区别有哪些？下面给大家介绍一下。 html中的标签元素大体被分为三种不一样的类型：块状元素、内联元素(又叫行内元素)和内联块状元素。那么块状元素和内联元素区别有哪些？下面给大家介绍一下。

内联元素

在html中，、、、

等标签是典型的内联元素。固然块状元素也可以通过设定display：inline；显示为内联元素，从而使块级元素拥有内联元素的特色。

p{
  display:inline;
}
...
我要酿成内联元素！

内联元素的特色：

1、和其他元素在统一行上，不独有一行；

2、元素的高度、宽度及顶部底部边距不成设定；

（ps：内联元素的顶部底部边距margin-top及margin-bottom属性不起作用，而margin-left及margin-right属性可以起作用。padding属性top、bottom、left、right也可起作用，但是padding-top属性最多只能撑到阅读器顶部，padding-top高于阅读器顶部，元素不会下移。当为行内元素增加配景时可以运用padding,但是配景色会遮盖四周元素。）

3、元素的宽度就是元素所包括的图片或文字的宽度，不成设定；

*：当行内元素之间有“回车”、“tab”、“空格”时就会涌现间隙。

解决办法：写在一行，中间不要有空格、回车之类的符号。

块状元素

在html中

、

、

、

、

和
• 就是块状元素。内联元素可以通过设定display:block；显示为块状元素。

  如：a{display:block;}

  块级元素的特色：

  1、每个块状元素都重新的一行开端，而且其后的元素也另起一行（独有一行）；

  2、元素的高度、宽度、行高以及顶和底边距都可设定；

  3、元素宽度在不设定的状况下，占它自身父容器的100%（和父元素宽度一致）；

  内联块状元素

  内联块状元素（inline-block）就是同时具备内联元素、块状元素的特色，代码display:inline-block就是将元素设定为内联块状元素。、标签就是这种内联块状标签。

  内联块状元素特色：

  1、和其他元素都在一行上；

  2、元素的高度、宽度、行高以及顶和底边距都可设定。

  举荐学习：HTML视频教程

  以上就是浅谈块状元素和内联元素之间的区另外细致内容，更多请关注 百分百源码网 其它相干文章！