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

소개

스타일을 적용했는데 예상대로 작동하지 않는 것보다 더 답답한 일은 없습니다. 축소 마진은 예상치 못한 스타일링 결과를 초래하는 현상 중 하나입니다. 따라서 축소 여백이란 무엇이며 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;
}

결론

여백 축소를 이해하면 특히 블록 수준 요소로 작업할 때 웹 레이아웃에서 일관되고 예상되는 간격을 유지하는 데 크게 기여할 수 있습니다. , , 등과 같은 인라인 요소는 블록 수준 요소와 비교하여 수직 여백을 생성하는 고유한 동작으로 인해 일반적으로 여백 축소의 영향을 받지 않는다는 점에 주목할 가치가 있습니다. 여백 축소는 주로

,

,

등과 같은 블록 수준 요소에 문제를 제기합니다. 왜냐하면 서로 상호 작용하는 수직 여백이 있을 수 있기 때문입니다.

참고자료

• Mdn
• w3Schools

위 내용은 CSS의 여백 축소: 초보자 가이드의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

css Float if for Property this display overflow margin padding border

성명：

본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.