[CSS] font-size값이 높이값에 영향끼치는 경우

post-thumbnail

📍 font-size가 증가할수록 위,아래 값이 같이 증가하는 경우(padding,margin 모두 0)

📌 원인: Line-height 값의 자동 증가

: font-size가 증가하면 line-height도 함께 영향을 받음
기본적으로 line-height는 normal(대략 1.2 배)로 설정되는데, font-size가 커지면 그에 맞춰 줄 간격도 커져서 텍스트가 차지하는 높이가 커지고, 위아래에 여백이 생긴 것처럼 보이게 됨

p {
  font-size: 24px;
  line-height: 1; /* 또는 font-size와 같은 값 */
}

이렇게 line-height를 1 또는 font-size와 동일한 값으로 설정하면 예상치 못한 간격이 줄어듭니다.

0개의 댓글