Svelte中如何设置span元素的高度？

你遇到的问题本质不是Svelte的限制，而是CSS的基础规则：span是行内元素，默认情况下height属性对行内元素不生效——哪怕是在普通HTML里，你写的代码其实也不会让height生效，只是背景色显示了内容区域而已。

以下是几种可行的解决方法：

• 转为块级元素
  通过display: block;将span转为块级元素，此时height、width等尺寸属性就能正常生效：

  <span>"Hello, World!"</span>
  
  <style>
    span {
      background: yellow;
      height: 3rem;
      display: block;
    }
  </style>
  

• 转为行内块元素
  如果需要span保持和其他行内元素在同一行的特性，同时能设置尺寸，可以用display: inline-block;：

  <span>"Hello, World!"</span>
  <span>相邻的行内块元素</span>
  
  <style>
    span {
      background: yellow;
      height: 3rem;
      display: inline-block;
      margin-right: 1rem;
    }
  </style>
  

• 用padding模拟高度
  若不需要严格控制height值，只是想让span有垂直方向的占位高度，可通过上下内边距实现，无需修改display属性：

  <span>"Hello, World!"</span>
  
  <style>
    span {
      background: yellow;
      padding-top: 1.5rem;
      padding-bottom: 1.5rem;
    }
  </style>
  

内容的提问来源于stack exchange，提问作者Karim Shaloh