http://hi.baidu.com/ate0611/blog/item/a7d39d134ab6eb085aaf538c.htmlphp
此文章转载自百度，纯属我的学习之用~~~~
css
block元素的特色：html
老是在新行上开始；
高度，行高以及顶和底边距均可控制；
宽度缺省是它的容器的100%，除非设定一个宽度。<div>, <p>, <h1>, <form>, <ul> 和 <li>是块元素的例子。
web
inline元素的特色：
和其余元素都在一行上；
高，行高及顶和底边距不可改变；
宽度就是它的文字或图片的宽度，不可改变。<span>, <a>, <label>, <input>, <img>, <strong> 和<em>是inline元素的例子浏览器
咱们来详细了解它们的状况。
块元素(block element)通常是其余元素的容器元素，块元素通常都重新行开始，它能够容纳内联元素和其余块元素,常见块元素是段落标签'P"。“form"这个块元素比较特殊，它只能用来容纳其余块元素。
若是没有css的做用，块元素会顺序以每次另起一行的方式一直往下排。而有了css之后，咱们能够改变这种html的默认布局模式，把块元素摆放到你 想要的位置上去。而不是每次都愚蠢的另起一行。须要指出的是，table标签也是块元素的一种，table based layout和css based layout从通常使用者（不包括视力障碍者、盲人等）的角度来看这两种布局，除了页面载入速度的差异外，没有其余的差异。可是若是普通使用者不经意点了 查看页面源代码按钮后，二者所表现出来的差别就很是大了。基于良好重构理念设计的css布局页面源码，至少也能让没有web开发经验的普通使用者把内容快 速的读懂。从这个角度来讲，css layout code应该有更好的美学体验。
你可以把块容器元素div想象成一个个box，或者若是你玩过剪贴文载的话，那就更加容易理解了。咱们先把须要的文章从各类报纸、杂志总剪 下来。每块剪下来的内容就是一个block。而后咱们把这些纸块按照本身的排版意图，用胶水从新贴到一张空白的新纸上。这样就造成了你本身独特的文摘快报 了。做为一种技术的延伸，网页布局设计也遵循了一样的模式。
内联元素(inline element)通常都是基于语义级(semantic)的基本元素。内联元素只能容纳文本或者其余内联元素，常见内联元素 “a”。
须要说明的是：inline element的中文叫法，有多种内联元素、内嵌元素、行内元素、直进式元素。基本上没有统一的翻译，爱怎么叫怎么叫吧。另外提到内联元素，咱们会想到有 个display的属性是display:inline;这个属性可以修复著名的IE双倍浮动边界问题。
块元素(block element)和内联元素(inline element)都是html规范中的概念。块元素和内联元素的基本差别是块元素通常都重新行开始。而当加入了css控制之后，块元素和内联元素的这种属 性差别就不成为差别了。好比，咱们彻底能够把内联元素cite加上display:block这样的属性，让他也有每次都重新行开始的属性。
sass
A：行内就是在一行内的元素，只能放在行内；块级元素，就是一个四方块，能够放在页面上任何地方。ide
B：说白了，行内元素就好像一个单词；块级元素就好像一个段落，若是不另加定义的话，它将独立一行出现。布局
C：通常的 块级元素诸如段落<p>、标 题<h1><h2>…、列表,<ul><ol><li> 、表格<table>、表单<form>、DIV<div>和BODY<body>等元素。而内联元素 则如: 表单元素<input>、超级连接<a>、图像<img>、<span> ……..性能
D：块级无素的显著特色是：每一个块级元素都是从一个新行开始显示，并且其后的无素也需另起一行进行显示。学习
E：<span>在CSS定义中属于一个行内元素，而<div>是块级元素。
用容器这一词会更容易形象理解它们的存在与用途，行内元素至关一个小容器，而<div>至关于一个大容器，大容器固然能够放一个小容器 了。<span>就是小容器。
块元素(block element)通常是其余元素的容器元素，块元素通常都重新行开始，它能够容纳内联元素和其余块元素,常见块元素是段落标签’P”。“form”这个块元素比较特殊，它只能用来容纳其余块元素。
[font style= "display:block "] SPAN1 [/font]
block通常一个块占一行，除非float
inline是自动排为一行，就象段内的文字同样，可成为多行。
display:inline比较经典的用法是用在 <ul> 下的 <li> 中
display:inline 对应不显示为 display:none
display:block 对应不显示为 hidden
说通俗点 样式为none的元素不占位置,而样式为hidden的元素虽然不显示但仍是占地方
inline-block的元素特色：
display:inline-block将对象呈递为内联对象，可是对象的内容做为块对象呈递。旁边的内联对象会被呈递在同一行内，容许空格。
将对象呈递为内联对象，可是对象的内容做为块对象呈递。旁边的内联对象会被呈递在同一行内，容许空格。(准确地说，应用此特性的元素呈现为内联对象，周围元素保持在同一行，但能够设置宽度和高度地块元素的属性)
并非全部浏览器都支持此属性，目前支持的浏览器有：Opera、Safari在IE中对内联元素使用display:inline-block，IE是 不识别的，但使用display:inline-block在IE下会触发layout，从而使内联元素拥有了display:inline-block 属性的表症。从上面的这个分析，也不难理解为何IE下，对块元素设置display:inline-block属性没法实现inline-block的 效果。这时块元素仅仅是被display:inline-block触发了layout，而它本就是行布局，因此触发后，块元素依然仍是行布局，而不会如 Opera中块元素呈递为内联对象。
IE下块元素如何实现display:inline-block的效果？
有两种方法：
一、先使用display:inline-block属性触发块元素，而后再定义display:inline，让块元素呈递为内联对象（两个 display要前后放在两个CSS声明中才有效果，这是IE的一个经典bug，若是先定义了display:inline-block，而后再将 display设回inline或block，layout不会消失）。代码以下（...为省略的其余属性内容）：
div {display:inline-block;...}
div {display:inline;}
二、直接让块元素设置为内联对象呈递（设置属性display:inline），而后触发块元素的layout（如：zoom:1等）。代码以下：
div {display:inline; zoom:1;...}
|
|
按ie的说法，margin，padding，border这些是layout属性。彷佛不应用在inline元素上。
但css2.1规范里有说明：
margin适用于
all elements except elements with table display types other than table-caption, table and inline-table
padding适用于
all elements except table-row-group, table-header-group, table-footer-group, table-row, table-column-group and table-column
不过，
margin-top/bottom对non-replaced inline元素无效（have no effect on non-replaced inline elements）。
margin-left/right对non-replaced inline元素会起做用，但当non-replaced inline是a元素时，ie下使用margin-left/right会有一个a:active虚框错位的小问题。
http://bbs.blueidea.com/thread-2927667-1-1.html
因此我以为对non-replaced inline元素使用margin不大好。
对replaced inline元素（img,textarea,button这些）的使用margin同block上效果也不大相同。
http://www.cssass.com/blog/index.php/2009/121.html padding也差很少。 padding-top/bottom用在non-replaced inline元素上，咱们也看不出效果。