CSS 레이아웃에서 : 자식 요소의 디스플레이 속성이 상위 요소의 높이에 어떤 영향을 미칩니 까?

CSS 레이아웃 : 부모 요소 높이에 대한 자식 요소 display 속성의 효과

상위 요소의 높이는 종종 CSS 레이아웃의 자식 요소 유형과 스타일의 조합에 의해 영향을받습니다. 이 기사는 예제를 사용하여 하위 요소의 display 속성 (특히 inline-block 및 block )이 부모 요소의 높이에 어떻게 영향을 미치는지 깊이 분석합니다.

다음 HTML 코드 및 CSS 스타일은 일반적인 경우를 보여줍니다.

<div class="outerbox1">
    이것은 외부 요소 1입니다
</div>

.outerbox1 {
    너비 : 600px;
    라인 높이 : 300px;
    배경색 : 엉겅퀴;
}

.outerbox1 span {
    디스플레이 : 인라인 블록; /* 부모 요소의 높이의 변화를 관찰하기 위해 블록으로 변경하십시오*/
    /* 디스플레이 : 블록; */
    배경색 : 청록색;
}

outerbox1 은 span 하위 요소를 포함하는 부모 요소입니다. outerbox1 에는 line-height: 300px 및 width: 600px 가 있으며 span 요소에는 line-height: 50px . span 요소의 display 속성이 중요하며 요소가 렌더링되는 방법을 결정하고 궁극적으로 상위 요소의 높이에 영향을 미칩니다.

span 요소의 display 속성이 inline-block 인 경우 특정 공간을 차지하지만 선을 감싸지 않습니다. 부모 요소의 높이 outerbox1 은 주로 span 요소의 컨텐츠 높이와 자체 line-height: 300px 에 의해 결정됩니다. span 의 line-height 50px이고 컨텐츠 높이가 50px를 초과하지 않기 때문에 부모 요소의 높이는 주로 자체 line-height 에 의해 결정됩니다.

그러나 span 요소의 display 속성을 block 변경 한 후 상황이 변경됩니다. block 요소는 전체 라인을 차지하며 컨텐츠에 따라 높이가 자동으로 조정됩니다. span 요소의 높이는 더 이상 line-height 에 의해서만 제한되지 않지만 컨텐츠 높이에 따라 다릅니다. 이로 인해 부모 요소 outerbox1 의 높이가 그에 따라 변경됩니다. span 요소의 실제 높이에 따라 높이를 조정하며 더 이상 자체 line-height 에 완전히 구속되지 않습니다. 텍스트 자체는 인라인 요소로 간주 될 수 있습니다. span 요소의 line-height: 50px 콘텐츠 라인 높이를 설정하지만 display 속성이 block 되면 선 높이가 block 요소의 전체 높이와 다르게 계산되므로 부모 요소의 높이에 영향을 미칩니다.

이 변경 사항을 이해하는 열쇠는 inline-block 및 block 요소의 렌더링 특성과 부모 요소의 line-height 속성과의 상호 작용을 마스터하는 것입니다. 이러한 레이아웃 메커니즘을보다 철저하게 이해하기 위해 HTML 및 CSS 관련 지식에 대해 자세히 알아 보는 것이 좋습니다.

위 내용은 CSS 레이아웃에서 : 자식 요소의 디스플레이 속성이 상위 요소의 높이에 어떤 영향을 미칩니 까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!