인라인 요소에는 실제로 'margin-top' 및 'margin-bottom' 속성이 부족합니까?

인라인 요소 패딩

인라인 요소 속성과 관련하여 패딩과 여백에 대한 일반적인 질문이 발생합니다. 일부 출처에 따르면 인라인 요소에는 완전한 패딩 속성이 있지만 margin-top 및 margin-bottom 속성이 없으며 margin-left 및 margin-right만 있습니다.

공식 Margin 관련 설명을 찾을 수 있는 곳

첫째, 이 주장은 W3 표준에 포함된 확정적인 진술이 아닙니다. 그러나 박스 모델에서는 margin-top 및 margin-bottom이 "대체되지 않은 인라인 요소에 영향을 미치지 않습니다"라고 명시합니다.

여백 속성의 "효과 없음" 이해

이 문맥에서 "효과 없음"은 속성이 없음을 의미하지 않습니다. 대신 이는 이러한 속성이 인라인 요소의 위치에 영향을 미치지 않는다는 것을 의미합니다. 그러나 상속 목적으로 존재합니다.

예: 여백 속성 상속

다음 코드를 고려하세요.

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>

In 이 예에서 두 번째 줄의 여백은 .two 규칙으로 인해 상위 범위에서 상속됩니다. 포함 요소에서 여백 값을 상속하는 이 동작은 margin-top 및 margin-bottom 속성이 텍스트와 같은 인라인 요소의 위치 지정에 직접적인 영향을 미치지 않더라도 존재함을 보여줍니다.

인라인의 패딩 속성 요소

인라인 요소에는 완전한 패딩 속성이 있지만 padding-top 및 padding-bottom은 예상대로 주변 텍스트에 영향을 미치지 않을 수 있습니다. 이는 인라인 요소가 기본적으로 정의된 높이를 갖고 있지 않기 때문입니다. 결과적으로 padding-top 또는 padding-bottom을 설정해도 주변 텍스트를 기준으로 요소의 크기나 위치가 시각적으로 변경되지 않을 수 있습니다.

위 내용은 인라인 요소에는 실제로 'margin-top' 및 'margin-bottom' 속성이 부족합니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!