CSS---再谈行内元素和块级元素
如果采用w3c盒子模型，即加上文档声明
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
如果不加 DOCTYPE 声明，那么各个浏览器会根据自己的行为去理解网页，即 IE 浏览器会采用 IE 盒子模型去解释你的盒子(ie盒子模型的content包括border和padding。)，而 FF 会采用标准 W3C 盒子模型解释你的盒子，所以网页在不同的浏览器中就显示的不一样了。反之，如果加上了 DOCTYPE 声明，那么所有浏览器都会采用标准 W3C 盒子模型去解释你的盒子，网页就能在各个浏览器中显示一致了。
以下为亲测
宽高：不可通过width和height属性改变其大小
外边距：左右外边距有效，会忽略上下外边距
内边距：可以设置，但和上下相邻的元素可能会发生重叠
（firefox中的截图）
但是如果行内元素设为浮动后，上述一切设置（width/height、margin、padding）均有效，换句话说就是可以设置宽高和内外边距了。
<html>
<head>
<title></title>
<style type="text/css">
*{
padding: 0;
margin: 0;
}
#outer{
width: 300px;
height: 100px;
background: red;
}
span{
background: #ccc;
width: 400px;
height: 300px;
margin: 10px;
padding: 10px;
}
#inner{
background: blue;
width: 100px;
height: 50px;
}
</style>
</head>
<body>
<div id="outer">
<span>this is a span.</span>
<span>this is a span.</span>
<div id="inner">this is a div.</div>
<span>this is a span.</span>
</div>
</body>
</html>
总结
块级元素和行内元素区别
- 行内元素同一行水平排列。
- 块级元素各占据一行，垂直方向排列。
- 块级元素可以包含行内元素和块级元素。但行内元素不能包含块级元素。
- 行内元素与块级元素属性的不同，主要是盒模型属性上。
- 行内元素设置width无效，height无效(可以设置line-height)，margin上下无效，padding上下无效
可以通过修改样式display属性改变元素是以块级还是行内元素呈现，当display的值设为block时，元素将以块级方式呈现；当display值设为inline时，元素将以行内形式呈现。
如果想让一个元素可以设置宽度高度，又让它以行内形式显示，我们可以设置display的值为inline-block。
