[CSS]使用行高的行距设置方法

“我不明白行高数字设置的工作原理”
“我总是在行之间适当地设置数字。”

我听到声音了。当然,有多种类型的“ line-height”值设置行之间的宽度,给人以“ songwriter”的印象。但是,可以在初始CSS设置中设置行距,这在瞄准易于阅读的网站时会给人以直观的印象。瞄准具有适当行距和字体大小的站点,而不是具有紧密行距的站点。

为此,我们这次将研究“行高”。这不是一个非常困难的CSS属性。如果您了解它是如何工作的,那么它就是一个易于使用的属性。如果您发现它有些困难,请借此机会掌握它。

[对于初学者]仔细解释如何编写CSS(样式表)

什么是行高?

“ Line-height”是用于调整行高的属性,您可以调整句子之间的间距,但是在句子前后(一行)创建的空间为“ line-height”,如下所示。请理解。换句话说,您看到的空间由句子上方和下方的空间组成。

因此,“线高”,即“一条线的高度”可以如下计算。

行高=上部空间的高度+字体大小+下部空间的高度
换句话说,在计算空格时,将字符大小值乘以“ line-height”值,然后将该值除以2(上下)即可找到上下空格的高度。

如何使用行高

如下设置行高。

现在让我们立即设置该值。将该值设置为1。

<div class="sample">
   <p>これはサンプルです。これはサンプルです。これはサンプルです。これはサンプルです。これはサンプルです。これはサンプルです。これはサンプルです。これはサンプルです。これはサンプルです。これはサンプルです。これはサンプルです。これはサンプルです。</p>
</div>
p{
  width: 50%;
  font-size: 18px;
  line-height: 1;
}

它将显示在浏览器中,如下所示。换句话说,根本不设置行距。换句话说,如果设置为“ 1”,则字体大小将设置为行高。如您所见,在仅数字值的设置中,line-height的高度是根据字符的大小确定的。

接下来,让我们将值设置为“ 2”。

p{
  font-size: 18px;
  line-height: 2;
}

然后,它将显示在浏览器中,如下所示。您可以看到行距增加了。

说到线条的高度,它是一种计算,其中设置了“字体大小18px x线条高度值” 2“ = 36px”。结果,分别在顶部和底部设置了“ 9px”。就行距而言,表示设置为“ 18px”。此外,该值不能为负。您可以设置它,但是结果将与“正常”设置相同,这是没有意义的。

现在,相反,让我们将line-hight设置为小于字体大小的值。

p{
  font-size: 18px;
  line-height: 0.5;
}

然后,字符将重叠显示。这没有道理。请记住,取决于设置单位,行高设置与“字符大小”密切相关。如果显示以下消息,请检查字体大小并检查设置值是否较小。

另外,假设人们在不同的环境下观看浏览器,则设置值优选为“ 1.5”。

对于主要段落内容,请确保最小行高值为1.5。这对于视力低下的人和认知障碍者很有用。如果将页面拉伸以增加文本大小,则无单位值将以相同百分比拉伸行高。看这里。

线高单位

顺便提及,在上文中,仅将数字值指定为line-hight的值,但是可以采用该值的其他单位。我将解释它,因为根据情况可能会使用它。

价值单位 描述
正常 这是初始值。浏览器将自动指定它。
数值+ px 如果使用“ px”指定,则不管字体大小如何,都用px设置高度。由于它是绝对值,因此在任何屏幕上看起来都一样。请注意,即使将字符设置为变量值,它也不会更改为行高。
数值+ em 与“ px”不同,“ em”是相对值。该值取决于字符的大小。例如,如果字体大小为“ 18px”,则“ line-hight:1.5em;”变为“ 27px(18px x 1.5)”。
数值+% “%”规范是一个相对值,例如“ em”。该值取决于字符的大小。例如,如果字符大小为“ 18px”,则“ line-hight:100%;”变为“ 18px(18px x 1)”,与仅值设置“ 1”相同。
没有单位 “无单位”规格是仅数值规格。这也随字符大小而变化。和此设置方法是最推荐的描述方法。

如上所述,可设定的值根据单位分为“绝对值”和“相对值”。如果用户仅从网站访问,则绝对值很好,但是如果假定用户将从各种设备访问,则“相对值”不必折叠屏幕。大概。

单位规格与无单位规格之间的差异

顺便提及,如上所述,可以采用各种单位,但是实际上,通常指定“无单位”。这样做的原因是这里有一个称为“值继承”的运动。

设置单位时,即使元素(父元素→子元素→孙子元素)和父元素中的“字体大小”不同,行高也不会与该字符的大小成比例地变化的行高也适用于子孙元素。因此,在为子元素和孙元素指定“字体大小”时必须小心。如果要在子孙之间有所作为,则需要为每个“字体大小”设置“行高”。许多人会建议使用此设置,因为您可以通过指定“无单位”来避免此麻烦。

例如,编写以下HTML。

<div class="parent">
   <p>これは親要素です。これは親要素です。これは親要素です。これは親要素です。これは親要素です。これは親要素です。これは親要素です。これは親要素です。これは親要素です。これは親要素です。</p>
   <div class="child">
     <p>これは子供要素です。これは子供要素です。これは子供要素です。これは子供要素です。これは子供要素です。これは子供要素です。これは子供要素です。これは子供要素です。これは子供要素です。</p>
      	<div class="grandchild">
             <p>これは孫要素です。これは孫要素です。これは孫要素です。これは孫要素です。これは孫要素です。これは孫要素です。これは孫要素です。これは孫要素です。これは孫要素です。</p>
    </div>
</div>

让我们尝试这种HTML的三种模式(%/ em /无单位)。首先,指定“%”。我指定“ line-height:200%;”。

.parent{
  font-size: 25px;
  行高:200%;
}

.child{
  font-size: 18px;
}

.grandchild{
  font-size: 12px;
}

浏览器上的显示如下。 “ 200%”是由子孙继承的。即使将单位更改为“ 2em”,这也是相同的显示。

毕竟,这对于设计不方便,有些人可能希望根据字符的大小调整行高。在这种情况下,如果为每个子孙指定“ line-height”是没有问题的,但是每次都这样做很麻烦。 “ No unit”很方便,因为它根据父母的“ line-height”根据子孙字符的大小调整行高。让我们实际尝试一下。

.parent{
  font-size: 25px;
  line-height: 2;
}

.child{
  font-size: 18px;
}

.grandchild{
  font-size: 12px;
}

您可以看到,仅通过为父元素指定一个“ line-height”,就可以根据子元素和孙元素的字符大小来改变行高,这与“ with unit”的说明不同。这样,如果您事先知道元素的移动会随着层次结构的下降而有所不同,那么最好选择“无单位”。

总结到目前为止我已经告诉您的内容,出现以下行高差异。

线高值单位 父级(字体大小:23像素) 儿童(字体大小:18px) 孙子(字体大小:13像素)
行高:200%; 行高46px 行高46px 行高46px
行高:2em; 行高46px 行高46px 行高46px
“没有单位” 行高46px 行高36px 行高26px

CSS行高摘要

最后,我想总结一下您需要了解的“行高”。

  • line-height属性是设置线条高度的属性,在浏览器上显示为字符大小以及上下边距的总和。
  • line-height属性设置为“ line-height:value;”。
  • 值的单位有“相对规格”和“绝对规格”,但是在相对规格中使用“无单位”的规格很方便。
  • 因为,如果将值设置为“ with unit”,则该值将被子级和子级元素继承。

撰写本文的人

田中 陽介

我在越南开展业务,并且从事与人事相关的咨询业务。我离开日本已经八年了,我享受着日本不可能发生的事情。最近,我正在使用Ruby on Rails进行Web服务。