텍스트 여백 제거하기

1. margin과 padding제거

HTML 요소들은 브라우저 기본 스타일로 여백이 있습니다.

→ 가장 먼저 margin과 padding을 제거합니다.

p, h1, h2, h3, span, div {
  margin: 0;
  padding: 0;
}

 

 

 

2. line-height를 1또는1em으로 설정

텍스트 요소는 기본적으로 line-height(줄간격) 때문에 위아래에 여백처럼 보이는 공간이 생깁니다.

→ line-height를 명시적으로 줄여야 합니다.

* {
  line-height: 1;
}

 

또는 더 구체적으로

p, span {
  line-height: 1;
}

 

 

 

3. vertical-align설정 (특히 inline, inline-block요소)

inline 또는 inline-block 요소는 부모 요소 기준으로 아래 여백(디센더 공간)을 남깁니다.

→ vertical-align: top; 또는 vertical-align: middle; 사용

 

span {
  vertical-align: top;
}

 

 

4. font-size 에 따라 생기는 내부 여백 고려

line-height: 1;
display: block; /* 또는 flex로 정렬 */

 

 

전체 예시 (완전히 텍스트 여백 제거)

<div class="text-zero">텍스트</div>

 

.text-zero {
  margin: 0;
  padding: 0;
  line-height: 1;
  font-size: 16px;
  display: inline-block; /* 또는 block */
  vertical-align: top;
}