内联元素：
内联元素又叫“行内元素”，w3c组织称之为“行内框”，
网友的经典比喻---“行内元素”就是橡皮筋，文字走到哪，橡皮筋包到哪
内联元素只对每一行的文字起作用，或者说内联元素的作用范围，不能跳出行的区域
内联元素下方的空白问题：
在一大段N行(N>=2)文字的行与行之间有行距
且行距是可以控制的，每行行距也都相等，
但是在最后一行，与后面的块状元素，则有一个明显的边距，这个边距是我们用css控制不了的，
开发中常碰到图片与下方的块状元素有空白的问题
原因：因为图片是内联元素，所有内联元素结束后，与后面的块状元素有一段空白。
解决：通过display来转换img为块状元素，再通过margin:0;来解决
目前我们所学的：
div p h* pre form是块状元素
img a span br都属于内联元素
内联元素与块状元素可以相互转换
通过display属性
block; 块
inline; 内联(行内元素)
none;没有，该元素和元素的子元素不再显示
就等同于这段代码被删除的效果，在页面内一点空间都不占
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
<style title="text/css">
span {
color:blue;
background:red;
}
a {
/*内联元素与块状元素可以相互转化
通过display属性
block; 块
inline; 内联(行内元素)
none;没有，该元素和元素的子元素不再显示
就等同于这段代码被删除的效果，在页面内一点空间都不占
*/
display:block;
background:orange;
width:50px;
height:50px;
}
li {
float:left;
background:gray;
width:100px;
height:50px;
padding:5px;
margin:5px;
border:solid 1px blue;
}
ul {
display:none;
}
p {
background:yellow;
}
img {
border:solid 1px; blue;
display:block;
}
p {
width:100px;
height:100px;
border:solid 1px red;
margin:0px;
padding:0px;
}
</style>
</head>
<body>
<div>今天是2与15日，<span>情人节已经过去了，别怀念了。。<br />
今天是2与15日，情人节已经过去了，别怀念了。。<br />
今天是2与15日，情人节已经过去了，别怀念了。。<br />
</span>
<a href="http://www.baidu.com">百度</a>
<br />还有一行
</div>
<ul>
<li><a href="#">首页</a></li>
<li><a href="#">业务介绍</a></li>
<li><a href="#">联系我们</a></li>
<li><a href="#">留言</a></li>
</ul>
<div>
第一行<br />
第二行<br />
第三行<br />
<p>我是块状</p>
</div>
<h2>开发中常碰到的图片下方留白的问题</h2>
<img src="http://static.cnblogs.com/images/adminlogo.gif" alt="" />
<p>假设我是导航区</p>
</body>
</html>
/**
燕十八 公益PHP培训
课堂地址:YY频道88354001
学习社区:www.zixue.it
**/
