span元素设置padding-top 时浏览器的现实问题

Question

demo地址
http://jsbin.com/gocixiyevu/1/edit?html,css,output

问题：
我设置span的padding－top属性，为什么不会使整个元素下移显示padding－top，而是将padding－top往上去？

Answer 1

因为 span 是一个内联元素。padding-top、padding-bottom、margin-top、margin-bottom 都不会影响其所在的行高。所以才出现了楼主例子中所说的，没有使整个元素下移显示 padding-top。
我简单改了一下楼主的demo。你一看应该就明白了。
HTML:

html<!--在span前一定要加上这个div,不然padding-top显示不出来-->
<div id="first"></div>
<p class="para">
    我是一个段落的开始
    <span class="inline">1</span>
    <span class="inline">1</span>
    <span class="inline">1</span>
    这是段的结尾
</p>
<p class="para">
    这是新的一段内容。   这是新的一段内容。   这是新的一段内容。   这是新的一段内容。
</p>

CSS:

css        *{
            padding: 0;
            margin: 0;
        }
        #first{
            height: 100px;
            background-color: gray;
        }
        .para{
            border:1px solid #44ff55;
        }
        .inline{
            border: 1px solid red;
            padding: 20px; 
            margin:20px;  
        }

另外还有一些文章，FYI:
http://http://blog.sina.com.cn/s/blog_682ff6a50101d82l.html
http://www.hicss.net/do-not-tell-me-you-understand-margin/
http://www.otarim.com/内联元素到底能不能设定padding-topbott...

Answer 2

　不用在span前一定要加上div,还有你去看看资料吧，内联元素可以设置外边界，但是外边界不对上下起作用，只能对左右起作用，也可以设置内边界，但是内边界在ie6中不对上下起作用，只能对左右起作用，直接display:inline-block;