여백 상단 및 인라인 요소

CSS에서 여백 속성은 요소 테두리 외부의 간격을 정의하는 데 사용됩니다. 그러나 인라인 요소, 특히 Firefox에서 여백 상단을 사용할 때 일반적인 문제가 발생합니다.

문제:

인라인 요소에 대해 여백 상단이 무시되는 것으로 나타나는 이유는 무엇입니까? Firefox에서?

답변:

이 동작은 Firefox에만 국한되지 않지만 CSS에 정의되어 있습니다. 2.1 사양:

CSS 2.1 여백 속성 사양:

"세로 여백은 대체되지 않은 인라인 요소에 아무런 영향을 미치지 않습니다."

설명:

텍스트, 와 같은 인라인 요소 태그 및 태그에는 정의된 높이와 너비가 없으며 일반적으로 한 줄의 콘텐츠로 렌더링됩니다. 수직 여백 속성인 Margin top은 인라인 요소 위에 공간을 만들려고 시도합니다. 단, 인라인 요소에는 여백을 수용할 높이가 없으므로 무시됩니다.

결론:

CSS 사양에 따라 여백 상단은 적용되지 않습니다. 인라인 요소. 인라인 요소 위에 수직 공간을 추가하려면 line-height 또는 padding-top과 같은 다른 옵션을 사용하는 것이 좋습니다.