CSS에서 텍스트를 들여쓰는 방법은 무엇입니까?

CSS 텍스트 속성은 텍스트의 모양을 정의합니다.

텍스트 들여쓰기

웹 페이지에서 단락의 첫 번째 줄 들여쓰기는 가장 일반적으로 사용되는 방법입니다. 텍스트 서식 효과. (추천학습: CSS 시작하기 튜토리얼)

CSS는 텍스트 들여쓰기를 쉽게 구현할 수 있는 text-indent 속성을 제공합니다.

text-indent 속성을 사용하면 모든 요소의 첫 번째 줄을 주어진 길이만큼 들여쓸 수 있으며, 길이가 음수일 수도 있습니다.

이 속성의 가장 일반적인 용도는 단락의 첫 번째 줄을 들여쓰는 것입니다. 다음 규칙은 모든 단락의 첫 번째 줄을 5em씩 들여쓰는 것입니다.

p {text-indent: 5em;}

# 🎜🎜 #참고: 일반적으로 text-indent는 모든 블록 수준 요소에 적용할 수 있지만, 이 속성은 인라인 요소에 적용할 수 없으며, text-indent 속성은 이미지와 같은 대체 요소에 적용할 수 없습니다. 그러나 블록 수준 요소(예: 단락)의 첫 번째 줄에 이미지가 있는 경우 해당 줄의 나머지 텍스트와 함께 이동합니다.

팁: 인라인 요소의 첫 번째 줄을 "들여쓰기"하려면 왼쪽 패딩이나 바깥쪽 여백을 사용하여 이 효과를 만들 수 있습니다.

음수 값 사용 ​​

text-indent를 음수 값으로 설정할 수도 있습니다. 이 기술을 사용하면 첫 번째 줄이 나머지 요소의 왼쪽에 붙는 "들여쓰기"와 같은 많은 흥미로운 효과를 얻을 수 있습니다.

p {text-indent: -5em;}

그러나 텍스트에 음수 값을 설정하는 경우 -indent 단락에 음수 값을 설정할 때 주의하십시오. 첫 번째 줄의 일부 텍스트가 브라우저 창의 왼쪽 가장자리를 넘어 확장될 수 있습니다. 이 표시 문제를 방지하려면 음수 들여쓰기에 대해 추가 여백이나 패딩을 설정하는 것이 좋습니다.

p {text-indent: -5em; padding-left: 5em;}

백분율 값 사용#🎜 🎜# text-indent는 백분율 값을 포함한 모든 길이 단위에서 작동합니다.

백분율은 들여쓰기된 요소의 상위 요소 너비를 기준으로 합니다. 즉, 들여쓰기 값을 20%로 설정하면 영향을 받는 요소의 첫 번째 줄은 상위 요소 너비의 20%만큼 들여쓰기됩니다.

다음 예에서 들여쓰기 값은 상위 요소의 20%, 즉 100픽셀입니다.

div {width: 500px;}
p {text-indent: 20%;}
<div>
<p>this is a paragragh</p>
</div>

상속# 🎜🎜#

text-indent 속성은 상속될 수 있습니다. 다음 태그를 고려하십시오.

div#outer {width: 500px;}
div#inner {text-indent: 10%;}
p {width: 200px;}
<div id="outer">
<div id="inner">some text. some text. some text.
<p>this is a paragragh.</p>
</div>
</div>

위 태그의 단락 이 단락은 ID가 inner인 div 요소의 들여쓰기 값을 상속하기 때문에 50픽셀씩 들여쓰기됩니다.

위 내용은 CSS에서 텍스트를 들여쓰는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!