块级元素

1. 独占一行，前后有其他标签时，会换行
2. 元素宽度默认 和父元素的宽度一致
3. 元素的高度、宽度、行高以及顶和底边距都可设置

<div>、<p>、<h1>...<h6>、<ol>、<ul>、<dl>、<table>、<form>

例子

<style type="text/css">
div,p{
    background:pink;
}
</style>

<div>div1</div>
<div>div2</div>
<p>测试</p>

内联元素（行内元素）

与块级元素相反

1. 不独占一行
2. 元素的宽度就是它包含的文字或图片的宽度，不可改变
3. 元素的高度、宽度及顶部和底部边距 不可设置

<a>、<span>、<br>、<i>

例子

<style type="text/css">
a,span,em{
    background:pink;/*设置a、span、em标签背景颜色都为粉色*/
}
<a href="http://www.baidu.com">百度</a>
<a href="http://www.imooc.com">慕课网</a>
<span>33333</span>
<span>44444</span><em>555555</em>

内联块状元素

1. 不独占一行
2. 元素的高度、宽度、行高以及顶和底边距都 可设置

<img>、<input>

例子

<style type="text/css">
a{

    width:20px;/*在默认情况下宽度不起作用*/
    height:20px;/*在默认情况下高度不起作用*/
    background:pink;/*设置背景颜色为粉色*/
    text-align:center; /*设置文本居中显示*/
    display:inline-block;
}
</style>
<a>1</a>
<a>2</a>
<a>3</a>
<a>4</a>

改变显示方式

设置为 块状元素

display:block;

设置为 内联块状元素

display:inline-block

设置为 内联元素

display:inline

原文出处：/show_1IX1GOg0vFOG.html