span设置padding后仅对首行生效无法覆盖全部内容该如何解决

span 是原生行内元素，默认按照文本行模型排版：它的padding只会作用在自身所在的第一行文本范围内，遇到<br>强制换行后，后续拆出来的文本行不属于span的原始排版盒范围，自然不会带上设置的padding，这就是你看到只有第一行有样式的根本原因。

• 方法1：最低改动量调整span的显示属性
  不需要修改现有HTML结构，直接给.tabulation类补样式：

  .tabulation {
    /* 给行内元素加上块级盒模型规则，让padding覆盖所有内部换行内容 */
    display: inline-block;
    padding-left: 2rem; /* 替换成你需要的具体padding值即可 */
  }
  

  选inline-block而不是block的原因是：后者会让span独占整行，把前面的"Some text"挤到上一行；inline-block既可以让块级盒模型的padding、margin完整作用在所有带<br>的文本行上，又不会打乱原来的横向排版。
• 方法2：更符合网页规范的结构调整
  课程作业里尽量减少靠<br>硬换行的写法，把span内部的列表内容换成无序列表结构：
  替换原来的span代码：

  <ul class="tabulation">
    <li>Une ambiance conviviale</li>
    <li>Durant l'été, une grande terrasse ensoleillée</li>
    <li>En hiver, une verrière chauffée</li>
    <li>De l'espace de stationnement</li>
    <li>Un chef cuisinier d'expérience</li>
    <li>Des salles privées pour les repas de groupe</li>
    <li>Un menu pour enfant</li>
    <li>Une vue sur le fleuve</li>
  </ul>
  

  配套样式：

  .tabulation {
    padding-left: 2rem;
    list-style: none; /* 不需要默认列表圆点就加这行 */
  }
  

  这种结构没有<br>的排版错位问题，后续调整样式的时候所有padding都能完整覆盖每一行内容，也更符合HTML语义化要求。

不要给纯行内元素直接设置上下方向的padding，哪怕调整了显示属性，行内排版模式下的上下padding会出现视觉错位，相邻文本会被挤动。如果只是需要实现整段内容向左偏移的缩进效果，用左右padding足够满足作业需求。

内容的提问来源于stack exchange，提问作者very nice user