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标签中常见的块级元素