span 如何接受 padding-top 和 padding-bottom？

Question

当我在互联网上阅读所有内容时，span 元素是内联元素，不接受垂直填充，我想让我试试看。所以我打开编辑器并尝试添加垂直填充并以某种方式工作。

这是我的 HTML 和 CSS 代码：

span {
  background-color:blue;
  padding-left:5rem;
  padding-bottom:5rem;
  padding-top:4rem;    
}

<span>
  asdfasdfsadfl
</span>
    

我也会添加它的ss：

你能解释一下我在这里缺少什么吗？

Answer 1

使用内联元素的主要目的是让部分排列成一行而不是作为一个单独的部分。即使你在 span 标签中包含填充，它也不会推送文本 创建填充，但会在不干扰文本流的情况下向外扩展。下面是证明相同的代码

span{
    background-color:blue;
    padding-top: 100px;
    padding-bottom:100px; 
    margin-top: 50px;
    border: 2px solid black;
    }

<p id="p" style="padding: 20px; border: 2px solid black;">block-block<span id="n">&nbsp-INLINE-&nbsp</span>block-block-block-block-block-block-block-block-block-block-block-block-block-block-block-block-block-block-block-block-block-block-block-block-block-block-block-block-block-block-block-block-block-block-block-block-block-block-block-blockblock-block-block-block-block-block-block-block-block-block-block-block-block-block</p>