如何在规模变化的响应文本行之间设置一致的填充/页边空白

Question

我对字体有点麻烦& css相关问题，希望大家都能帮助我解决这个问题。这是一个由两部分组成的问题。

1）有什么办法可以在缩小比例的文本之间设置一致的填充或边距大小？我已经尝试了一切，但填充和边距似乎只对应于文本大小...

2）一旦填充和边距一致性问题解决了，有没有什么办法可以使填充/边距和字体大小响应。例如，从笔记本电脑过渡到iPhone。

以下是css和html代码。我还设置了一个JSFiddle以供参考。

CSS

#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%;} 

HTML

<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> 

谢谢大家:)

Answer 1

首先，你应该不是同一个ID多次有，它应该是独特。其次，要保持相同的距离，你可以设置一个行高，请参阅：

.text {font-family:"helvetica"; font-weight: bold; font-style: normal; text-align: center; font-size: 20px; letter-spacing: 0.2em; height: auto; line-height: 100px; } 
 
.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 class="text s01">STACK</div> 
 
<div class="text s02">STACK</div> 
 
<div class="text s03">STACK</div> 
 
<div class="text s04">STACK</div> 
 
<div class="text s05">STACK</div> 
 
<div class="text s06">STACK</div>

第二个问题是很难的。您只能为绝对值中的所有行设置相同的行高。即使使用CSS ~选择器（对于同胞），相对值将始终是（因此是名称）相对，在本例中是字体大小。