CSS의 여백 축소: 초보자 가이드
- Barbara Streisand원래의
- 2024-09-24 18:16:021089검색
소개
스타일을 적용했는데 예상대로 작동하지 않는 것보다 더 답답한 일은 없습니다. 축소 마진은 예상치 못한 스타일링 결과를 초래하는 현상 중 하나입니다. 따라서 축소 여백이란 무엇이며 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;
}
결론
여백 축소를 이해하면 특히 블록 수준 요소로 작업할 때 웹 레이아웃에서 일관되고 예상되는 간격을 유지하는 데 크게 기여할 수 있습니다. , , 등과 같은 인라인 요소는 블록 수준 요소와 비교하여 수직 여백을 생성하는 고유한 동작으로 인해 일반적으로 여백 축소의 영향을 받지 않는다는 점에 주목할 가치가 있습니다. 여백 축소는 주로 , 위 내용은 CSS의 여백 축소: 초보자 가이드의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요! 등과 같은 블록 수준 요소에 문제를 제기합니다. 왜냐하면 서로 상호 작용하는 수직 여백이 있을 수 있기 때문입니다.
참고자료