CSS의 인라인 요소에 패딩이 실제로 어떻게 작동하나요?

인라인 요소에 대한 패딩: 탐구

인라인 요소에 대한 패딩 개념은 특히 마진과의 상호 작용과 관련하여 종종 혼란을 가져왔습니다. 속성. 이 기사에서는 인라인 요소 패딩의 특수성을 조사하고 일반적인 오해를 해결할 것입니다.

인라인 요소 패딩: 오해

일부 출처에서는 인라인이 그렇게 주장할 수 있습니다. 요소에는 완전한 패딩 속성이 있지만 이는 완전히 정확하지는 않습니다. 인라인 요소에는 실제로 패딩이 있을 수 있지만 수직(상단 및 하단) 여백을 적용하는 기능이 부족합니다. CSS 사양에는 이러한 속성이 대체되지 않은 인라인 요소에 "효과가 없다"고 명시적으로 명시되어 있습니다.

상속 및 여백의 비효과

그러나 "아니요" 효과"는 속성이 존재하지 않는다는 의미는 아닙니다. 인라인 요소에 직접 적용하면 무시됩니다. 그럼에도 불구하고 그들은 상속에서 중요한 역할을 합니다. 다음 예에서 볼 수 있듯이 여백은 자식으로 사용될 때 블록 요소에 상속되고 적용될 수 있습니다.

p { border: 1px solid red; }
i { vertical-align: top; }
span { margin-top: 20px; margin-bottom: 20px; }
b { display: inline-block; }
.two { margin: inherit; }

<p><i>Hello</i> <span>World <b class="one">my good friend</b></span></p>
<p><i>Hello</i> <span>World <b class="two">my good friend</b></span></p>

세로 패딩의 미스터리

또 다른 일반적인 오해는 인라인 요소가 수직 패딩을 허용할 수 없다는 것입니다. padding-top과 padding-bottom이 텍스트 콘텐츠에는 효과적이지 않은 것처럼 보일 수 있지만 주변 요소에는 영향을 미칩니다. 귀하의 예에서 "hello" 텍스트 주위의 패딩은 텍스트를 위아래로 밀기 때문에 표시되지 않지만 텍스트 자체는 원래 줄 내에 남아 있습니다.

위 내용은 CSS의 인라인 요소에 패딩이 실제로 어떻게 작동하나요?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!