CSS 단어 간격과 문자 간격(코드 포함)의 차이점에 대한 심층적인 이해-CSS 튜토리얼-php.cn

CSS 단어 간격과 문자 간격(코드 포함)의 차이점에 대한 심층적인 이해

yulia

풀어 주다： 2018-09-08 10:45:31

원래의

5863명이 탐색했습니다.

CSS는 "단어"를 일종의 공백 문자로 둘러싸인 공백이 아닌 문자의 문자열로 정의합니다. letter-spacing 속성과 word-spacing 속성은 모두 해당 요소에 공백을 추가하는 데 사용됩니다. 때로는 둘이 혼동되는 경우가 많습니다. 다음으로 CSS의 간격 설정에 대해 이야기하겠습니다.

1. 단어 간격 단어 사이의 간격을 늘리거나 줄입니다(예: 단어 간격)

1. 개체의 단어 사이에 삽입된 공백 수를 검색하거나 설정합니다. 음수 값은 허용됩니다.
2. 기본값은 0으로 설정하는 것과 동일합니다.
3. 음수 값이 허용되므로 글자가 더 간결해집니다.
4. 이 속성을 사용하면 단어가 너무 넓은 문서를 만들 수 있습니다. 띄어쓰기를 사용하므로 주의해서 사용해야 합니다

2. 문자 간격 문자 사이의 간격을 늘리거나 줄입니다(예: 문자 간격)

1. 개체의 텍스트 사이의 간격을 설정합니다. 및 영문자는 설정된 간격으로 구분됩니다. 이 속성은 단어 간격을 제어합니다. 해당 속성 값은 중국어와 영어 모두에 적용됩니다.
2. 기본값은 0으로 설정하는 것과 같습니다.
3. 문자 간격은 텍스트에만 적용되며 그림에는 영향을 주지 않습니다. 한자에서 letter-spacing 속성을 사용하는 것은 한 글자를 기준으로 합니다. 띄어쓰기의 경우 영어는 한 글자로 구분됩니다.

예: 같은 문장에 대해 letter-spacing 속성과 word-spacing 속성을 각각 부여하여 차이점을 알아보세요.

<!DOCTYPE html>
<html>
 <head>
  <meta charset="UTF-8">
  <title></title>
  <style type="text/css">
   .a1{letter-spacing: 15px;}
   .a2{word-spacing: 15px;}
  </style>
 </head>
 <body>
  <p class="a1">have a nice day 今天心情怎么样呢？</p>
  <p class="a2">have a nice day 今天心情怎么样呢？</p>
 </body>
</html>

로그인 후 복사

Rendering:

CSS 단어 간격과 문자 간격(코드 포함)의 차이점에 대한 심층적인 이해