内联与块的区别

块 （block）对象默认宽度是100%（继 承自父元素），如果块对象没有采用“float:left”或“float:right;” 的样式，相邻的两个块对象就会分排在不同的两行上。哪怕只有30px,也会换一行。例如，<div>, <p>, <h1>, <form>, <ul>,<ol> 和 <li><blockquote>是块元素的例子。

内 联（inline）对象的宽度取决于其内部元素的宽度(width)与 填充(padding)值之和，不可直接指定其宽度与高度（但如果使用“display:block;” 或者“float:left/right;”样式后,可 以强行转换成块对象,此时可以定义），相邻的两个内联对象会排在同一行上,不 会从新行开始。例如：<span>, <a>, <label>, <input>, <img>, <strong> 和<em>是inline元 素的例子。

(1)块里可以含行.也 就是div块里可以有span;

(2)但是内联元素内不能包含块 元素;

(3)内联存在margin-left和margin-right,但 没有margin-top和margin-bottom,也 不具有width/height。

(4)而块元素具有高,宽,margin等 等;

(5) 内联元素可以通过改变它 的display属性来变成块,来具有块的 属性。

如:

a{

background:#FF6600;

display:block; /*   */

width:100px;

height:100px;

}

块对象默认宽度是100%（继承自父元素），如果没有采用 “float:left/right;”样式，相邻的两个块对象就会分排在不同的两行上。

内联对象的宽度取决于其内部元素的宽度与 padding样式值之和，不可直接指定其宽度与高度（“display:block;”、“float:left/right;”强行转换后可以定 义），相邻的两个内联对象会排在同一行上。

]

什么是内联对象，什么是块对 象？css

<DIV style="FONT-SIZE: 12px">什么是内联对象，什么是块对象？

所 有可视的文档对象都是块对象(block element)或者内联对象(inline element)。例如， div 是一个块对象，span 是一个内联对象。

块对象的特征是从新的一行开始且能包含其他块对象和内联对象。从新的一行开始：比如div就是前后断行；
内联对 象被呈递时不会从新行开始，能够包含其他内联对象和数据。内联可以这样理解：不从新的一行开始，直接从内容里面，接着往后走。。。是指它能被别的对象内 联。。。。


==========================
相关信息参考：css display参数

block   : CSS1   块对象的默认值。将对象强制作为块对象呈递，为对象之后添加新行
none   : CSS1   隐藏对象。与 visibility 属性的hidden值不同，其不为被隐藏的对象保留其物理空间（页面物理尺寸大小空间）
inline   : CSS1   内联对象的默认值。将对象强制作为内联对象呈递，从对象中删除行


改变此属性值（即：display）对其周围内 容布局的影响可能是：

在属性值设为 block 的对象后面添加新行。
从属性值设为 inline 的对象中删除一行。
隐 藏属性值设为 none 的对象并释放其在文档中的物理空间(页面物理尺寸大小空间)。</DIV>

<style type="text/css" >
        div
        {
            width:100px;
            height:100px;
            background-color:red;
        }
       
        a
        {
            width:100px;
            height:100px;
            background-color:red;
        }
       
        .inlinediv
        {
            display:inline;
        }
       
        .blocka
        {
            display:block;
        }
    </style>

两个连续的块对象
    <div>div1</div>
    <div style="background-color:Blue;">div2</div>
    两个连续的内联对象
    <a>a1</a>
    <a style="background-color:Blue;">a2</a>
    <br />
    两个特定格式的块对象（转化为内联对象）
    <div class="inlinediv">inline div1</div>
    <div class="inlinediv" style="background-color:Blue;">inline div2</div>
    <br />
    两个特定格式的内联对象(转化为块对象)
    <a class="blocka">a1</a>
    <a class="blocka" style="background-color:Blue;">a2</a>