text-underline-offset
속성 사용법
text-underline-offset
속성은
text-decoration: underline;
의 간격 띄우기(오프셋, offset)를 설정합니다.
ABCDEF ghijklm 가나다라 12345
형식 구문
selector {
text-decoration: underline;
text-underline-offset: /* value */;
}
형식 정의
초깃값 | auto |
---|---|
적용 요소 | 모든 요소 |
상속 | 예 |
값
auto |
브라우저가 밑줄에 적절한 간격 띄우기를 선택합니다. |
---|---|
length |
밑줄의 간격 띄우기를 length (길이) 값으로 지정하여 글꼴 파일 제안 및 브라우저 기본값을 재정의합니다. 간격 띄우기는 글꼴 크기에 따라 크기가 조정되도록 em 단위를 사용하는 것이 좋습니다. |
length
값이 양수일 경우에는 바깥쪽으로, 음수일 경우에는 안쪽으로 간격 띄우기를 합니다.
text-underline-offset
간격 기준
밑줄의 간격 기준(영점 위치)는 아래에서 자세히 설명하는 text-underline-position
의 값에 따라 달라집니다.
text-underline-position 값 | 간격 기준(영점 위치) |
---|---|
auto |
알파벳 기준선(baseline) |
from-font |
글꼴 파일에 선호 위치에 대한 정보가 포함되어 있으면 이 값을 사용. 글꼴 파일에 이 정보가 포함되어 있지 않으면 알파벳 기준선(baseline) |
under |
텍스트 아래 가장자리 |
left |
세로 쓰기 모드에서 텍스트 왼쪽 가장자리 |
right |
세로 쓰기 모드에서 텍스트 오른쪽 가장자리 |
예제
p {
font-size: 1.3em;
text-decoration: underline;
text-underline-position: under;
text-underline-offset: 0;
}
<p>ABCDEF ghijklm 가나다라 12345</p>
ABCDEF ghijklm 가나다라 12345
브라우저 호환성
마지막 업데이트 정보: 2024-06-13
속성과 값 |
데스크탑 Chrome
|
데스크탑데스크탑 Edge
|
데스크탑 Firefox
|
Safari
|
---|---|---|---|---|
text-underline-offset
|
87 | 87 | 70 | 12.1 |
퍼센트(%) 값
|
87 | 87 | 74 | 지원하지 않음 |
명세서
명세서 사양 | |
---|---|
text-underline-offset
|
CSS Text Decoration Module Level 4 #underline-offset |