CSS에서 줄 간격과 단어 간격을 설정하는 방법
- 醉折花枝作酒筹원래의
- 2021-04-09 13:57:205952검색
CSS에서는 letter-spacing 속성을 통해 단어 간격을 설정할 수 있으며 구문은 "letter-spacing: value"입니다. line-height 속성을 통해 줄 간격을 설정할 수 있으며 구문은 "line-height: 상대값|절대값".
이 튜토리얼의 운영 환경: Windows7 시스템, CSS3&&HTML5 버전, Dell G3 컴퓨터.
CSS는 줄 간격을 설정합니다
CSS에서 줄 간격은 line-height 속성을 통해 설정됩니다. line-height 값은 텍스트 두 줄 사이의 기준선을 나타냅니다. 거리. ine-height属性来实现行间距的设置，line-height的值表示的是两行文字之间基线的距离。
文字的基线，指的是如果给文字加上下划线，那么上下划线就是文字的基线。
Line-height的值设置为具体的数值，可以是相对数值，也可以设置为绝对数值，在静态页面中，文字大小固定时常常使用绝对数值，而对于论坛和博客这些用户可以自定义字体大小的页面，通常设置为相对数值，从而，可以随着用户自定义的字体大小改变相应的行间距。
<span style="font-size:24px;"><html>
<head>
<title>
行间距
</title>
<style>
<!--
p.one{
font-size:10pt;
line-height:8pt;
}
p.second{
font-size:18px;
}
p.third{font-size:10px;
}
p.second,p.third{
line-height:1.5em;
}
-->
</style>
</head>
<body>
<p class="one">9月23日是“秋分”，我国古籍《春秋繁露、阴阳出入上下篇》中说：“秋分者，阴阳相半也，故昼夜均而寒暑平。”“秋分”的意思有二：一是太阳在这时到达黄径180.一天24小时昼夜均分，各12小时；二是按我国古代以立春、立夏、立秋、立冬为四季开始的季节划分法，秋分日居秋季90天之中，平分了秋季。</p>
<p class="second">秋分时节，我国常见流域及其以北的广大地区，均夏侯进入了秋季，日平均气温都降到了22℃以下。北方冷气团开始具有一定的势力，大部分地区雨季刚刚结束，凉风习习，碧空万里，风和日丽，秋高气爽，丹桂飘香，蟹肥橘黄，秋分是美好宜人的时节。</p>
<p class="third">秋季降温快的特点，使得秋收、秋耕、秋种的“三秋”大忙显得格外紧张。秋分棉花吐絮，烟叶也由绿变黄，正是收获的大好时机。华北地区已开始播种冬麦，长江流域及南部广大地区正忙着晚稻的收割，抢晴耕翻土地，准备油菜播种。</p>
</body>
</html>
</span>代码如上，第一段文字采用了绝对数值，并且行间距设置的比文字大小还要小，因此，文字发生了部分重叠的现象。
第二段和第三段，分别设置了不同的文字大小，但是由于使用了相对数值，因此，能够自动的调节行间距。
CSS设置字间距
CSS中通过letter-spacing
Line-height 값은 특정 값으로 설정되며, 이는 상대값 또는 절대값일 수 있습니다. 정적 페이지에서는 포럼 및 블로그의 경우 사용자가 고정할 때 절대값이 사용되는 경우가 많습니다. 글꼴을 사용자 정의할 수 있습니다. 페이지 크기는 일반적으로 상대 값으로 설정되므로 해당 줄 간격은 사용자 정의 글꼴 크기로 변경할 수 있습니다.
<span style="font-size:24px;"><html>
<head>
<title>
字间距
</title>
<style>
<!--
p.one{
font-size:10pt;
letter-spacing:-2pt;
}
p.second{
font-size:18px;
}
p.third{
font-size:11px;
}
p.second,p.third{
letter-spacing:.5em;
}
-->
</style>
</head>
<body>
<p classs="one">文字间距1，负数</p>
<p class="second">文字间距2，相对数值</p>
<p class="third">文字间距3，相对数值</p>
</body>
</html>
</span>코드는 위와 같습니다. 텍스트의 첫 번째 단락은 절대값을 사용하며, 줄 간격은 텍스트 크기보다 작게 설정되어 텍스트가 부분적으로 겹칩니다.
두 번째 문단과 세 번째 문단은 각각 서로 다른 텍스트 크기가 설정되어 있지만 상대값 사용으로 인해 줄 간격이 자동으로 조정될 수 있습니다. 🎜🎜🎜🎜CSS는 단어 간격을 설정합니다🎜🎜🎜🎜 CSS는letter-spacing 속성을 사용하여 단어 간격을 조정합니다. 이 속성은 상대 값과 절대 값도 설정할 수 있습니다. 🎜rrreee🎜 코드는 위와 같습니다. 상대값과 절대값을 사용하는 것 외에도 텍스트 간격 속성 letter-spacing도 음수를 사용하여 텍스트가 겹치는 효과를 얻을 수 있음을 알 수 있습니다. 🎜🎜🎜 [추천 학습: 🎜css 동영상 튜토리얼🎜]🎜위 내용은 CSS에서 줄 간격과 단어 간격을 설정하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!