CSS의 여백 축소: 초보자 가이드-CSS 튜토리얼-php.cn

CSS의 여백 축소: 초보자 가이드

Barbara Streisand

풀어 주다： 2024-09-24 18:16:02

원래의

1069명이 탐색했습니다.

Collapsing Margins in CSS: A Beginner

소개

스타일을 적용했는데 예상대로 작동하지 않는 것보다 더 답답한 일은 없습니다. 축소 마진은 예상치 못한 스타일링 결과를 초래하는 현상 중 하나입니다. 따라서 축소 여백이란 무엇이며 CSS의 여백에 어떤 영향을 미치나요?

축소되는 마진

여백 축소는 요소 외부의 간격을 제어하는 CSS 속성 여백에서 비롯됩니다. 이름에서 알 수 있듯이 접는 여백은 인접한 요소의 여백이 합산되는 것이 아니라 하나로 결합되거나 '축소'될 때 발생합니다. 이는 일반적으로 형제 요소 사이 또는 상위 요소와 하위 요소 사이에서 발생합니다. 예를 들어, 두 형제 요소에 여백이 있는 경우(하나는 하단 여백 20px, 다른 하나는 상단 여백 30px) 총 여백이 50px가 될 것으로 예상할 수 있습니다. 단, 여백 축소로 인해 더 큰 여백인 30px만 적용되고, 더 작은 여백인 20px는 접힙니다.

.element1 {
    margin-bottom: 20px;
}
.element2 {
    margin-top: 30px;
}

로그인 후 복사

또한 상위 요소에 패딩이나 테두리가 부족하고 해당 하위 요소에 상단 여백이 있는 경우 여백이 상위 요소를 넘어 "축소"되어 상위 요소 배치에 영향을 미칠 수 있습니다.

.parent {
    margin-top: 0;
}
.child {
    margin-top: 20px;
}

로그인 후 복사

.child의 20픽셀 상단 여백이 .parent 외부로 축소되어 전체 상위 여백이 20픽셀 아래로 이동할 수 있습니다.

결과 간격이 기대와 일치하지 않을 수 있기 때문에 초보 개발자는 혼란스러울 수 있습니다(최근까지는 이 사실을 전혀 몰랐습니다).

이 문제를 해결하는 방법

패딩 또는 테두리 추가: 상위 요소에 약간의 패딩 또는 테두리를 추가하면 여백 축소를 방지할 수 있습니다.

.parent {
    padding-top: 1px; /* or border-top: 1px solid transparent; */
}

로그인 후 복사

오버플로 속성 사용: 상위 항목의 오버플로 속성을 표시 이외의 것으로 설정하면(예: 오버플로: 숨김;) 여백 축소를 방지할 수 있습니다.

.parent {
    overflow: hidden;
}

로그인 후 복사

Flexbox 또는 그리드 레이아웃 사용: 이러한 레이아웃 방법은 설계상 여백 축소 문제를 방지합니다.

Flexbox 예:

.parent {
    display: flex; /* Flexbox layout */
    flex-direction: column; /* Stack children vertically */
    border: 1px solid #000; /* Just for visibility */
}

.child1, .child2 {
    margin: 20px 0; /* Vertical margins that won't collapse */
    background-color: lightblue;
}

로그인 후 복사

그리드 예

.parent {
   display: grid; /* Grid layout */
   grid-template-rows: auto auto; /* Define two rows */
   border: 1px solid #000; /* Just for visibility */
 }

.child1, .child2 {
     margin: 20px 0; /* Vertical margins */
     background-color: lightgreen;
 }

로그인 후 복사

Float 또는 Inline-Block 사용: 하위 요소를 부동화하거나 표시하도록 설정: inline-block; 또한 여백이 무너지는 것을 방지합니다. 하지만 더 이상 float를 거의 볼 수 없지만 레거시 코드 베이스의 경우 알아두면 좋습니다.

플로트 예:

.parent {
    border: 1px solid #000; /* Just for visibility */
 }

 .child1, .child2 {
     float: left; /* Prevents margin collapsing */
     width: 100%; /* Full width */
     margin: 20px 0; /* Vertical margins */
     background-color: lightcoral;
 }

로그인 후 복사

인라인 블록 예

.parent {
   border: 1px solid #000; /* Just for visibility */
}

.child1, .child2 {
    display: inline-block; /* Prevents margin collapsing */
    width: 100%; /* Full width */
    margin: 20px 0; /* Vertical margins */
    background-color: lightyellow;
}

로그인 후 복사