css行距指南

了解如何使用CSS样式的属性行高度来影响网页上的行距。...

了解如何使用CSS样式的属性行高度来影响网页上的行距。

Line spacing icon or button

css行间距的值

CSS行距受CSS样式的建筑红线高度的影响。此属性最多可使用5个不同的值:

  • 正常:浏览器确定与字体大小相关的行距值。这通常与字体大小相同或稍大(如20%)。
  • 继承:行距应取自父元素的行距。因此,如果将正文标记的行高设置为比字体大小大30%,并且将其中的段落标记设置为继承,则它们的行高也将比字体大小大30%。
  • 数字:如果行高值没有度量单位,则认为它是行高字体大小的倍增。因此,1.25的行高将比字体大小大25%。
  • 长度:如果“线高度”值具有度量单位,则表示线之间应有的确切空间量。因此,1.25毫米将导致线间距为1.25毫米。
  • 百分比:如果行高为百分比,则为字体大小的百分比。因此,125%的行高将比字体大小大25%。

css行距应该使用哪个值

在大多数情况下,行距的最佳选择是保持默认值或“正常”。这通常是最可读的,并且不需要做任何特殊的操作。但是改变行距可以给你的文本一种不同的感觉。

如果您的字体大小定义为ems或百分比,那么您的行高也应该这样定义。这是最灵活的行距形式,因为它允许读者调整字体大小,并保持相同的行距比例。

使用点(pt)值设置打印样式表的行高。点是一种打印度量,因此您的字体大小也应该以点为单位。

我们不喜欢使用数字选择,因为我们发现它最让人困惑。许多人认为这个数字是一个绝对的数字,所以他们把它变成了一个巨大的数字。例如,您可能将字体设置为14px,然后将行高设置为14,这会导致行间距设置为字体大小的14倍,从而导致行间距过大。

行间距应使用多少空间

如上所述,我们建议使用默认的行距,除非您有特定的理由更改它。更改行距可能会产生不同的效果:

  • 紧密结合在一起的文本可能很难阅读。但是小的行间距会影响文本的情绪。如果文本被挤在一起,它会使文本的意义看起来更暗或更密集。
  • 相距较远的文本也可能难以阅读。但宽大的行距使文本看起来更流畅。
  • 更改行距可以使原本不适合空间的文本更紧凑,或在设计中占用更多空间。

  • 发表于 2021-09-04 21:34
  • 阅读 ( 55 )
  • 分类:IT

你可能感兴趣的文章

javascript程序员jquery基本指南

... 我们之前已经介绍过jQuery,因此本jQuery指南将重点介绍实际的编码。 ...

  • 发布于 2021-03-16 15:42
  • 阅读 ( 227 )

基本的html常见问题,你应该书签

... 在开始之前,请务必阅读我们的指南,免费在线HTML编辑器和最好的网站的质量HTML的例子。 ...

  • 发布于 2021-03-25 17:43
  • 阅读 ( 253 )

使用css格式化文档以便打印

...有媒体的样式表中收集所有常用样式(可能是字体系列或行距),并在单个样式表中收集特定于媒体的格式。同样,这也是关注点分离的另一种用法。 ...

  • 发布于 2021-03-28 16:05
  • 阅读 ( 246 )

如何在googledocs上增加文本的两倍空间

行距是两行文字之间的垂直间距。当有人要求你“在谷歌文档中增加一倍空间”时,你不必感到困惑。行距是设计文档易读性的一个重要部分,只需轻敲或单击几下即可。 ...

  • 发布于 2021-03-29 04:57
  • 阅读 ( 216 )

如何在word、pages和google文档中格式化剧本

... 通过更改字体、行距、边距和样式规则,您可以在Microsoft Word、Apple Pages或Google Docs中创建格式完美的剧本。 ...

  • 发布于 2021-03-30 13:00
  • 阅读 ( 882 )

如何更改googledocs默认格式设置

默认情况下,googledocs使用特定的字体和行距。本指南向您展示了如何更改googledocs中的默认格式设置,这样您就不用手动将这些元素替换为每个新文档中更好的内容。 例如,当我们在googledocs中创建一个新文档时,字体设置为Aria...

  • 发布于 2021-04-02 21:52
  • 阅读 ( 144 )

如何在microsoftword中控制行距和段落间距

...定精确的间距来完全控制。下面是方法。 更改文档中的行距或段落间距并不是您经常需要做的事情。但是,任何一个必须用双倍行距交论文的人都知道,这可能是及格和不及格的区别。大学毕业后,你仍可能面临雇主、客户或...

  • 发布于 2021-04-05 04:24
  • 阅读 ( 165 )

如何自定义firefox的用户界面用户浏览器.css

...真正想要的调整,甚至可以请求输入。 编辑上下文菜单指南:从Firefox上下文菜单中删除项目并更改其在列表中的顺序的说明,摘自FirefoxCSS子Reddit。 记住,旧版本的Firefox有不同的界面。较老的用户浏览器.css在Firefox57和更高版...

  • 发布于 2021-04-07 01:02
  • 阅读 ( 214 )

自定义word2007&2010中的默认行距

...多的空间。下面我们来看看如何在word2007&2010中自定义行距。 Word 2003中的间距 在word2003中,默认的行距是1.0,对于某些用户可能需要压缩。 更改Word 2007和2010中的行距 在word2007&2010中,微软将默认行距改为1.15。对于某些用...

  • 发布于 2021-04-13 10:40
  • 阅读 ( 176 )

开始学习html和css与这个终极指南

...何选择一个起点。设计网站CSS Tricks有自己的HTML和CSS学习指南,但是他们已经将大量的备选方案编译成了一个范围广泛但易于接近的列表。如果你喜欢从书中学习,他们有两本特别好的书可以推荐。如果你想要一个在线课程,他...

  • 发布于 2021-05-14 06:23
  • 阅读 ( 159 )
jwvg4753
jwvg4753

0 篇文章

相关推荐