html中的标签元素大致被分为三种不一样的类型：块状元素、内联元素(又叫行内元素)和内联块状元素。html
内联元素浏览器
在html中，<span>、<em>、<a>、<p>等标签是典型的内联元素。固然块状元素也能够经过设置display：inline；显示为内联元素，从而使块级元素具备内联元素的特色。spa
div{ display:inline; } ... <div>我要变成内联元素！</div>
内联元素的特色：code
一、和其余元素在同一行上，不独占一行；orm
二、元素的高度、宽度及顶部底部边距不可设置；htm
（ps：内联元素的顶部底部边距margin-top及margin-bottom属性不起做用，而margin-left及margin-right属性能够起做用。padding属性top、bottom、left、right也可起做用，可是padding-top属性最多只能撑到浏览器顶部，padding-top高于浏览器顶部，元素不会下移。当为行内元素添加背景时可使用padding,可是背景色会覆盖周围元素。）blog
三、元素的宽度就是元素所包含的图片或文字的宽度，不可设置；图片
*：当行内元素之间有“回车”、“tab”、“空格”时就会出现间隙。input
解决方法：写在一行，中间不要有空格、回车之类的符号。io
块状元素
在html中<div>、 <p>、<h1>、<form>、<ul> 和 <li>就是块状元素。内联元素能够经过设置display:block；显示为块状元素。
如：a{display:block;}
块级元素的特色：
一、每一个块状元素都重新的一行开始，而且其后的元素也另起一行（独占一行）；
二、元素的高度、宽度、行高以及顶和底边距均可设置；
三、元素宽度在不设置的状况下，占它自己父容器的100%（和父元素宽度一致）；
内联块状元素
内联块状元素（inline-block）就是同时具有内联元素、块状元素的特色，代码display:inline-block就是将元素设置为内联块状元素。<img>、<input>标签就是这种内联块状标签。
内联块状元素特色：
一、和其余元素都在一行上；
二、元素的高度、宽度、行高以及顶和底边距均可设置。