html 具有不同响应字体大小的行之间的间距相同

eqqqjvef  于 2022-12-09  发布在  其他
关注(0)|答案(1)|浏览(130)

我怎么能做到不管每个文本的大小如何都能彼此粘在一起呢?现在发生的情况是test <> test_2test_2 <> test_3之间有不同的间隙。特别是在调整div的大小时。

<div>
    
    <div style="font-size:2vw">test</div>
    <div style="font-size:10vw">test2</div>
    <div style="font-size:3vw">test3</div>
    
  </div>

https://jsbin.com/koqobexuna/edit?html,output

cgh8pdjw

cgh8pdjw1#

根据显示的文本(例如,带有大下行字母的小写字母或大写字母),您无法避免行间的空格不同。
另请参阅:"Typography – The Anatomy of Letters"
您只能通过调整设计/布局概念来减轻这种影响:

  • 通过text-transform: uppercase;切换到大写字母
  • 使用具有负边距的伪元素将行裁剪到端点高度
  • 在行div之间添加绝对边距(使用像素或雷姆单位)

第一个

相关问题