代码：
<html> <head> <title>div 标记范例</title> <style type="text/css"> div.widthstyle{ font-size:18px; /* 字号大小 */ font-weight:bold; /* 字体粗细 */ font-family:Arial; /* 字体 */ color:#FFFF00; /* 颜色 */ background-color:#0000FF; /* 背景颜色 */ text-align:center; /* 对齐方式 */ /*width:300px;*/ /* 块宽度 默认宽度为一行，两边有点距离*/ height:100px; /* 块高度 */ margin-top: 10px; } span{ font-size:18px; /* 字号大小 */ font-weight:bold; /* 字体粗细 */ font-family:Arial; /* 字体 */ color:#FFFFFF; /* 颜色 */ background-color:#0000FF; /* 背景颜色 */ text-align:center; /* 对齐方式 */ width:300px; /* 块宽度 span没有宽度的概念 */ height:100px; /* 块高度 span没有高度的概念*/ padding-left:10px; margin-left:10px; } </style> </head> <body> <div class="widthstyle"> 这是一个div标记1 </div> <div class="widthstyle"> 这是一个div标记2 </div> <div class="widthstyle"> 这是一个div标记3 </div> <span> 这是一个span标记1 </span> <span> 这是一个span标记2 </span> <span> 这是一个span标记3 </span> <div> <span> 这是一个div中的span标记1 </span> <span> 这是一个div中的span标记2 </span> <span> 这是一个div中的span标记3 </span> </div> <div> <span> 这是一个单独div中的span标记1 </span> </div> <div> <span> 这是一个单独div中的span标记2 </span> </div> <div> <span> 这是一个单独div中的span标记3 </span> </div> </body> </html>
说明：div默认占据一行，两边有所空隙。可以设置宽度、高度，即使是设置宽度了，div还是占据一行，只是盒子的内容空间小了。
span是行内元素，没有宽度和高度的概念。放在一个单独的div中，才会独自占据一行位置，这个位置也是div争取回来的。
本文转自TBHacker博客园博客，原文链接：http://www.cnblogs.com/jiqing9006/p/4987496.html，如需转载请自行联系原作者