>웹 프론트엔드 >CSS 튜토리얼 >CSS에서 text-indent 사용법과 패딩과의 차이점에 대한 자세한 설명

CSS에서 text-indent 사용법과 패딩과의 차이점에 대한 자세한 설명

零下一度
零下一度원래의
2017-06-19 14:46:552480검색

구문:
text-indent : 길이

매개변수:

length : 백분율 숫자 | 부동 소수점 숫자와 단위 식별자로 구성된 길이 값이 허용됩니다. 길이 단위 참조

설명:

개체에서 텍스트 들여쓰기를 검색하거나 설정합니다.
이 속성은 다른 개체(예:)에 의해 연결이 끊어진 개체 내에 적용될 수 없습니다.
해당 스크립트 기능은 textIndent입니다. 제가 쓴 다른 책들도 참조해 주세요.

예:

div { text-indent : -5px; } 
div { text-indent : underline 10%; }

How to use text-indent in css
text-indent
는 word의 첫 번째 줄 들여쓰기와 마찬가지로 텍스트의 첫 번째 줄 들여쓰기를 나타냅니다.
예: 첫 번째 줄을 원합니다. 2로 들여쓰기되는 단락의 경우 이 텍스트의 글꼴 크기는 12px입니다. CSS에서 텍스트 들여쓰기와 패딩의 차이점은 무엇입니까?



text-indent는 요소의 최종 너비에 영향을 미치지 않지만 호환성 문제가 있습니다. Padding은 하위 버전의 주류 브라우저 IE에서 최종 너비에 영향을 주지만 Chrome 및 Firefox의 너비에는 영향을 미치지 않습니다. CSS 재설정을 통해 해결됩니다. 브라우저 표시 문제는 다양하므로 모두 너비에 영향을 미칩니다.

텍스트 들여쓰기와 패딩의 기본 차이점: 1. 패딩은 박스 모델을 기반으로 하며 인라인 및 블록 수준 요소에 적용됩니다. 2 텍스트 들여쓰기는 인라인 조판을 기반으로 하며 블록 수준 요소에만 적용됩니다. 블록 수준에서 작동합니다. 요소 내부 텍스트의 첫 번째 줄

padding은 인라인 상자 또는 블록 상자의 왼쪽 패딩 영역에 작용하여 콘텐츠 상자에 영향을 미치고 텍스트 하위 노드가 콘텐츠 내부에 나타납니다. -box, 모든 텍스트가 왼쪽으로 이동됩니다.

23efcc05e98690ceeb219581933e4231 인라인 블록 레벨 레이블로 고정된 단일 라인으로 표시됩니다(공백 메커니즘과 다름). 위의 차이점은 존재하지 않습니다. 차이점은 무엇입니까?
 1. Text-indent는 인라인 조판을 기반으로 하기 때문에 text-indent에서 제공하는 들여쓰기가
direction 적용 후 오른쪽에 나타납니다. rtl; padding-left
은 영향을 받지 않습니다. 방향.
  물론 23efcc05e98690ceeb219581933e4231
 에는 방향 속성이 일반적으로 사용되지 않습니다. 2. 왼쪽 패딩은 상자 모델을 기반으로 하므로 상자 크기 속성은 요소의 최종 너비에 영향을 미칩니다. padding-left 및 width 속성과 함께 Text-indent는 요소의 너비에 영향을 미치지 않습니다.
웹킷과 파이어폭스의 기본 스타일 시트는 입력 요소의 box-sizing: border-box를 설정하기 때문에 이는 매우 중요합니다. 너비와 왼쪽 패딩을 동시에 설정하면 웹킷에 많은 문제가 발생합니다. /firefox 및 IE 하위 버전의 경우 너비 차이가 큽니다.
  따라서 padding-left를 사용할 때는 웹킷과 파이어폭스의 해당 스타일을 재설정해야 합니다.


위 내용은 CSS에서 text-indent 사용법과 패딩과의 차이점에 대한 자세한 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

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