Css 如何在按比例转换的响应文本行之间设置一致的填充/边距

我遇到了一个与字体和css相关的问题，希望你们能帮助我解决这个问题。这是一个由两部分组成的问题

1是否有任何方法可以在比例降低的文本之间设置一致的填充或边距大小？我尝试了所有的方法，但是填充和边距似乎只与文本大小相对应

2一旦填充和边距一致性问题得到解决，是否有任何方法可以使填充/边距和字体大小响应。例如，从笔记本电脑过渡到iphone

下面是css和html代码。我还建立了一个功能参考

CSS

HTML

---

谢谢大家：

首先，您不应该多次使用相同的id，它应该是唯一的。接下来，要保持相同的距离，可以设置线高度，请参见：

.text{字体系列：helvetica；字体大小：粗体；字体样式：普通；文本对齐：居中；字体大小：20px；字母间距：0.2em；高度：自动；行高：100px；} .text.s01{字体大小：1000%；} .text.s02{字体大小：600%；} .text.s03{字体大小：300%；} .text.s04{字体大小：150%；} .text.s05{字体大小：80%；} .text.s06{字体大小：30%；} 堆栈 堆栈 堆栈 堆栈 堆栈

---

感谢您修改的css和html！，文本之间的空格仍然不一致。行高似乎与文本大小百分比有关。我想知道是否有一种方法，线的高度可以保持一致，这样堆栈之间的空间可以保持不变？

#text {font-family:"helvetica"; font-weight: bold; font-style: normal; text-align: center; font-size: 20px; letter-spacing: 0.2em; height: auto;}
#text.s01 {font-size: 1000%;}
#text.s02 {font-size: 600%;}
#text.s03 {font-size: 300%;}
#text.s04 {font-size: 150%;}
#text.s05 {font-size: 80%;}
#text.s06 {font-size: 30%;}

<div id="text" class="s01">STACK</div>
<div id="text" class="s02">STACK</div>
<div id="text" class="s03">STACK</div>
<div id="text" class="s04">STACK</div>
<div id="text" class="s05">STACK</div>
<div id="text" class="s06">STACK</div>