인라인 요소의 패딩: 효과 및 제한

소스에 따르면 인라인 요소의 상단과 하단에 패딩을 추가해도 영향을 미치지 않습니다. 주변 요소의 간격. 그러나 "패딩은 다른 인라인 요소와 겹칩니다"라는 설명은 패딩이 영향을 미치는 특정 상황이 있을 수 있음을 나타냅니다.

겹치는 패딩 이해

패딩은 주로 인라인 요소에 영향을 미칩니다. 적용되는 요소의 수직 테두리가 늘어납니다. 일반적인 상황에서는 패딩된 요소 주위로 흐를 수 있으므로 인접한 인라인 요소와 겹치는 결과가 발생하지 않습니다. 그러나 주변 요소도 인라인 요소인 경우 고유한 간격이 변경될 수 있습니다.

예를 들어 기본 간격이 있는 두 개의 인접한 인라인 요소를 생각해 보세요. 위쪽 및 아래쪽 패딩을 그 중 하나에 적용하면 패딩이 테두리를 넘어 확장되어 잠재적으로 패딩된 요소가 다른 요소와 겹칠 수 있습니다. 이는 요소가 혼잡하거나 잘못 정렬되어 나타날 수 있으므로 페이지 레이아웃에 시각적으로 영향을 미칠 수 있습니다.

인라인 블록을 사용하여 패딩 충돌 해결

패딩 충돌을 방지하려면 인라인 요소의 경우 display: inline-block 속성을 사용할 수 있습니다. 이를 통해 요소의 수직 정렬을 제어하고 인접 요소와의 겹침을 방지할 수 있습니다.

인라인 블록을 사용하려면 요소에 다음 속성을 적용합니다.

display: inline-block;
display: -moz-inline-box;
-moz-box-orient: vertical;
vertical-align: top;
zoom: 1;
*display: inline;

이러한 속성은 패딩된 요소가 주변의 인라인 콘텐츠 흐름을 방해하지 않고 블록 수준 요소처럼 동작하도록 보장합니다. 이렇게 하면 패딩이 인접한 요소와 겹치지 않고 원하는 레이아웃과 모양이 유지됩니다.