HTML - underline

HTML5 - underline

html 작업을 하다보면 text-decoration: underline을 사용할 때가 있다. 그러나 미세하게 텍스트와 언더라인 사이에 간격을 줄 때가 있는데 검색해보면 2가지 방법이 나온다.

1. padding-bottom을 이용하는 방법

   text-decoration: none
   border: 1px solid red
   padding-bottom: 3px
   

   위의 방법이 가장 많이 나오지만, padding-bottom에는 마이너스값을 주면 동작하지 않고, 텍스트와 언더라인 사이의 간격도 의외로 많이 떨어져서 조금만 띄워야하는 경우에는 이 방법이 적절하지 않다.

2. text-underline-offset을 이용하는 방법

   text-decoration: underline
   text-underline-offset: 2px
   text-decoration: underline 1px
   

참고

text-decoration: underline 사이 공간 띄우기