css-内联（行内）元素、块元素、margin、padding

http://hi.baidu.com/ate0611/blog/item/a7d39d134ab6eb085aaf538c.html

此文章转载自百度，纯属个人学习之用~~~~

block元素的特点：

总是在新行上开始；
高度，行高以及顶和底边距都可控制；
宽度缺省是它的容器的100%，除非设定一个宽度。

,

,

,

,

和
• 是块元素的例子。
  

inline元素的特点：
和其他元素都在一行上；
高，行高及顶和底边距不可改变；
宽度就是它的文字或图片的宽度，不可改变。, , , , , 和是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这样的属性，让他也有每次都从新行开始的属性。

---

A：行内就是在一行内的元素，只能放在行内；块级元素，就是一个四方块，可以放在页面上任何地方。

B：说白了，行内元素就好像一个单词；块级元素就好像一个段落，如果不另加定义的话，它将独立一行出现。

C：一般的 块级元素诸如段落

、标 题

…、列表,

1. 、表格、表单、DIV
   和BODY等元素。而内联元素则如: 表单元素、超级链接、图像、 ……..

   D：块级无素的显著特点是：每个块级元素都是从一个新行开始显示，而且其后的无素也需另起一行进行显示。

   E：在CSS定义中属于一个行内元素，而

   是块级元素。
   用容器这一词会更容易形象理解它们的存在与用途，行内元素相当一个小容器，而

   相当于一个大容器，大容器当然可以放一个小容器 了。就是小容器。
   块元素(block element)一般是其他元素的容器元素，块元素一般都从新行开始，它可以容纳内联元素和其他块元素,常见块元素是段落标签’P”。“form”这个块元素比较特殊，它只能用来容纳其他块元素。

   ---

   display:inline
   它可以让行内显示为块的元素，变为行内显示，例如
   DIV1
   DIV2
   这里DIV1和DIV2分别占一行，但是你给他们加上属性后变了
   DIV1 DIV2
   DIV1和DIV2这时候显示在同一行了
   和 display:inline 对应的是 display:block，block 会让应用了该 CSS 属性的 HTML 标记变成块级别元素，例如 SPAN 是行内显示的，但是你加了 display:block 属性就不一样了

   
   　　[font style= "display:block "] SPAN1 [/font]
   

   　 block一般一个块占一行，除非float

   
   　　inline是自动排为一行，就象段内的文字一样，可成为多行。

   
   　　display:inline比较经典的用法是用在

   下的
   • 中

     
     　　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的效果？
     
     有两种方法：
     1、先使用display:inline-block属性触发块元素，然后再定义display:inline，让块元素呈递为内联对象（两个display要先后放在两个CSS声明中才有效果，这是IE的一个经典bug，如果先定义了display:inline-block，然后再将display设回inline或block，layout不会消失）。代码如下（...为省略的其他属性内容）：
     
     div {display:inline-block;...}
     div {display:inline;}
     
     
     2、直接让块元素设置为内联对象呈递（设置属性display:inline），然后触发块元素的layout（如：zoom:1等）。代码如下：
     
     div {display:inline; zoom:1;...}

     ---

   块元素(block element) 　　◎ address - 地址 　　◎ blockquote - 块引用 　　◎ center - 举中对齐块 　　◎ dir - 目录列表 　　◎ div - 常用块级容易，也是css layout的主要标签 　　◎ dl - 定义列表 　　◎ fieldset - form控制组 　　◎ form - 交互表单 　　◎ h1 - 大标题 　　◎ h2 - 副标题 　　◎ h3 - 3级标题 　　◎ h4 - 4级标题 　　◎ h5 - 5级标题 　　◎ h6 - 6级标题 　　◎ hr - 水平分隔线 　　◎ isindex - input prompt 　　◎ menu - 菜单列表 　　◎ noframes - frames可选内容，（对于不支持frame的浏览器显示此区块内容 　　◎ noscript - 可选脚本内容（对于不支持script的浏览器显示此内容） 　　◎ ol - 排序表单 　　◎ p - 段落 　　◎ pre - 格式化文本 　　◎ table - 表格 　　◎ ul - 非排序列表

   内联元素(inline element) 　　◎ a - 锚点◎ abbr - 缩写 　　◎ acronym - 首字 　　◎ b - 粗体(不推荐) 　　◎ bdo - bidi override 　　◎ big - 大字体 　　◎ br - 换行 　　◎ cite - 引用 　　◎ code - 计算机代码(在引用源码的时候需要) 　　◎ dfn - 定义字段 　　◎ em - 强调 　　◎ font - 字体设定(不推荐) 　　◎ i - 斜体 　　◎ img - 图片 　　◎ input - 输入框 　　◎ kbd - 定义键盘文本 　　◎ label - 表格标签 　　◎ q - 短引用 　　◎ s - 中划线(不推荐) 　　◎ samp - 定义范例计算机代码 　　◎ select - 项目选择 　　◎ small - 小字体文本 　　◎ span - 常用内联容器，定义文本内区块 　　◎ strike - 中划线 　　◎ strong - 粗体强调 　　◎ sub - 下标 　　◎ sup - 上标 　　◎ textarea - 多行文本输入框 　　◎ tt - 电传文本 　　◎ u - 下划线 　　◎ var - 定义变量

   ---

   按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元素上，我们也看不出效果。

---