HTML5 Flexbox에서 요소 사이에 생기는 알 수 없는 간격 해결 방법

Flexbox에서 발생하는 알 수 없는 간격의 원인

Flexbox 레이아웃에서 요소 사이에 의도하지 않은 간격이 나타나는 가장 흔한 원인은 마진 상쇄(margin collapsing) 현상입니다. 특히 헤더(header)의 마진이 바(bar) 영역 쪽으로 상쇄되면서 두 요소 사이에 눈에 보이지 않는 여백이 생기게 됩니다.

간격 문제를 해결하는 방법

이 문제는 다음과 같은 방법으로 간단하게 해결할 수 있습니다.

• 헤더의 마진을 0으로 초기화하거나, 바(bar) 영역에 테두리(border)를 추가합니다.
• 바 영역에 패딩을 적용합니다. 예를 들어 padding: 10px; 속성을 추가하면 됩니다.

적용 코드 예시

아래 코드 스니펫을 참고하면 알 수 없는 간격 문제를 손쉽게 해결할 수 있습니다.

.bar {
    background: yellow;
    color: gray;
    height: 250px;
    padding: 10px;
    text-align: center;
}

바 영역에 패딩 값을 지정하면 헤더의 마진이 상쇄되어 발생하던 불필요한 간격이 제거되고, 레이아웃이 의도한 대로 깔끔하게 정렬됩니다.