CSS 여백 겹침을 해결하는 방법 요약

이 글은 CSS 마진 겹침에 대한 자세한 설명에 대한 몇 가지 해결 방법을 주로 소개합니다. 편집자는 이것이 꽤 좋다고 생각합니다. 이제 공유하고 참고하겠습니다. 편집기를 따라 살펴보겠습니다

오늘은 CSS를 사용하여 여백 겹침을 방지하는 여러 가지 방법을 정리했습니다

먼저 일련의 돔 구조를 가정해 보겠습니다

<p class="parent">
    <p class="child">
    </p>
</p>

일반적으로 하위 요소에 여백을 설정하면, 이 속성은 상위 요소에 동일한 영향을 미칩니다. 그러나 이는 실제로 우리가 원하는 결과가 아닙니다. 하위 요소에만 여백을 설정하려고 합니다. 이제 어떻게 해야 할까요?

(1) 상위 요소에 테두리 설정

.parent { 
    width: 300px;       
    height: 300px;
    border: 1px solid #ccc;
}
.child {
    width: 200px;
    height: 200px;
    margin: 20px;
}

(2) 상위 요소에 패딩 추가

.parent {
    padding： 1px;
    width: 300px;
    height: 300px;
}
.child {
    width: 200px;
    height: 200px;
    margin: 20px;
}

(3) 너비와 높이가 위의 형제 요소 추가 하위 요소에는 너비와 높이가 있다는 것을 기억하세요.

<p class="parent">
     <p style="width: 20px;height: 20px;margin-top: "></p>
     <p class="child">
     </p>
</p>

(4) Overflow: Hidden; 속성을 상위 요소로 설정합니다.

.parent {
    overflow: hidden;
    width: 300px;
    height: 300px;
}
.child {
    width: 200px;
    height: 200px;
    margin: 20px;
}

(5) display: inline-block을 하위 요소로 설정합니다. 인라인 요소 또는 인라인 블록 수준 요소는 여백이 겹치는 문제가 없습니다)

.parent {
    width: 300px;
    height: 300px;
} 
.child {
    width: 200px;
    height: 200px;
    margin: 20px; 
    display: inline-block;
}

(6) 플로팅과 같이 문서 흐름에서 하위 요소를 분리하여 이를 달성하는 방법에는 여러 가지가 있습니다. 절대 위치 지정 등. 여기서는 자세히 설명하지 않겠습니다.

위 내용은 CSS 여백 겹침을 해결하는 방법 요약의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!