>웹 프론트엔드 >CSS 튜토리얼 >CSS 텍스트 속성의 텍스트 들여쓰기 구문 분석

CSS 텍스트 속성의 텍스트 들여쓰기 구문 분석

不言
不言원래의
2018-07-19 15:41:583422검색

텍스트 속성 text-indent는 텍스트의 첫 번째 줄 들여쓰기를 설정하는 데 사용됩니다. 모든 요소는 첫 번째 줄을 주어진 길이만큼 들여쓸 수 있으며 길이는 음수일 수도 있습니다. 빠른 요소에 적용됩니다!

p{text-align:2em;}

이 규칙은 모든 단락의 첫 번째 줄을 2자로 들여씁니다.

일반적으로 text-indent는 모든 블록 수준 요소에 적용할 수 있지만 인라인 요소나 6ed09268cbdd0015bce8dcbbdfa9bfe4와 같은 대체 요소에는 적용할 수 없습니다. 단락의 텍스트와 함께 이동합니다.

text-indent는

  • p{text-indent:-2em;}

여기 있는 모든 단락의 첫 번째 줄이 2텍스트씩 앞으로 이동됩니다. 크기. 그러나 음수 text-indent를 사용할 경우에는 텍스트가 요소 밖으로 흘러나와 원하는 효과를 얻지 못할 수도 있으므로 주의하십시오.

여기서 주목해야 할 점은 백분율을 사용한다는 것입니다. 백분율은 상위 요소에 상대적인 값을 나타냅니다. 들여쓰기 값을 5%로 설정하면 이 요소의 첫 번째 줄이 5%만큼 들여쓰기됩니다. 상위 요소의 너비입니다. 예:

  • p{너비:400px;}

  • p{text-indent:5%;}

e388a4556c0f65e1904146cc1a846beee388a4556c0f65e1904146cc1a846bee이것은 단락입니다. 텍스트 들여쓰기 비율94b3e26ee717c64999d7867364b1b4a394b3e26ee717c64999d7867364b1b4a3

텍스트의 첫 번째 줄이 20px만큼 들여쓰기되는 것을 확인할 수 있습니다. 계산 원리는 상위 요소가 400x5% = 20px입니다. 물론 여기에는 p 요소가 없다는 점에 유의해야 합니다. 너비를 설정하면 너비가 자체 너비에 대한 백분율로 계산됩니다.

그러나 text-indent에서 가장 흥미로운 점은 선언된 값이 아닌 계산된 값을 상속하는 상속일 것입니다. 예를 들어 {width : 500px;}

  • p {너비 : 400px; 텍스트-안정 : 10%;}

  • p {너비 : 200px;}

  • <span style="font-size: 14px;"><p><br/>这是外面的文字<br/><p>这是里面的文字</p><br/></p></span>

    여기서는 텍스트의 두 단락 중 첫 번째 줄이 외부 텍스트 50px 대신 50px 들여쓰기되어 있고 p 요소의 텍스트가 40px 들여쓰기된 것을 볼 수 있습니다. 선언된 값이 아닌 계산된 값을 상속합니다.

  • 관련 권장 사항:

CSS에서 텍스트 들여쓰기를 사용하는 방법

위 내용은 CSS 텍스트 속성의 텍스트 들여쓰기 구문 분석의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명:
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.