CSS에서 밑줄이 그어진 텍스트와 밑줄 사이의 간격을 어떻게 늘릴 수 있습니까?

CSS를 사용하여 밑줄 간격 강화

텍스트와 밑줄을 시각적으로 구분하는 것은 가독성을 위해 필수적입니다. CSS는 텍스트에 밑줄을 추가하기 위해 text-꾸밈:밑줄 속성을 제공하지만 텍스트와 줄 사이의 간격을 조정하는 직접적인 방법은 제공하지 않습니다.

대체 솔루션

대신 단색 스타일과 0이 아닌 너비로 border-bottom 속성을 사용하는 것이 좋습니다. 이렇게 하면 텍스트 아래에 테두리가 만들어져 밑줄을 효과적으로 모방할 수 있습니다. 또한 padding-bottom을 적용하면 텍스트와 테두리 사이의 수직 공간이 늘어나서 간격이 더 넓어지는 것처럼 보입니다.

예를 들어 다음 코드 샘플은 3px 패딩을 사용하여 텍스트 아래에 1px 검정색 테두리를 설정합니다. 아래:

border-bottom: 1px solid #000;
padding-bottom: 3px;

색상 사용자 정의

테두리를 원하는 경우 텍스트 색상과 일치하도록 색상을 지정하고 색상 선언을 생략하면 border-bottom-width: 1px 및 border-bottom-style: solid가 됩니다.

여러 줄 텍스트 처리

여러 줄 텍스트의 경우 기본 요소 내에 중첩된 범위 요소 내에 래핑합니다. 그런 다음, 테두리 하단 및 패딩 속성을 범위 요소에 적용합니다. 이 기술은 여러 줄의 시나리오에서 텍스트와 밑줄 사이의 간격을 효과적으로 확장합니다.

위 내용은 CSS에서 밑줄이 그어진 텍스트와 밑줄 사이의 간격을 어떻게 늘릴 수 있습니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!