应用错误收集

我知道span元素是一个inline元素，显示为：inline;默认情况下为属性。如果我对其应用了任何顶部或底部边距，边框或填充（除非应用display：inline-block或block），否则不起作用。

但是在我的示例中，为什么边框顶部和填充顶部消失或被视口弄乱了？和padding-bottom和border-bottom都在显示？

span {
    margin: 100px;
    border: 5px solid black;
    padding: 20px;
    background-color: yellow;
}

<body>
        <span>google</span>
 </body>

另一件事发生了：如果我在跨度的顶部放几个br，那么可以看到border-top和padding-top吗？

span {
    margin: 100px;
    border: 5px solid black;
    padding: 20px;
    background-color: yellow;
}

<body>
        <br/><br/><br/><br/><br/>
        <span>google</span>
 </body>

为什么会这样？请有人解释（我正在使用谷歌浏览器查看结果）-谢谢