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

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

全选复制放进笔记        *{
            padding: 0;
            margin: 0;
        }
        #first{
            height: 100px;
            background-color: gray;
        }
        .para{
            border:1px solid #44ff55;
        }
        .inline{
            border: 1px solid red;
            padding: 20px; 
            margin:20px;  
        }