CSS의 여백과 패딩: 간격 속성은 어떻게 다릅니까?

CSS의 여백과 안쪽 여백 이해하기

CSS에서 요소 주위의 공간을 조정할 때 두 가지 중요한 속성인 여백과 안쪽 여백이 나타납니다. 둘 다 간격을 조작하는 데 사용되지만 서로 다른 동작과 적용 방식을 나타냅니다.

세로 여백 자동 축소

근본적인 차이점은 세로 여백의 동작에 있습니다. 인접한 요소의 여백은 겹치지만 패딩은 겹치지 않습니다. 패딩이 1em인 요소 뒤에 패딩이 1em인 다른 요소가 오면 내용 사이의 전체 세로 간격은 2em이 됩니다. 반면에 1em 여백을 사용하면 여백이 겹쳐서 세로 간격이 1em으로 유지됩니다. 이 기능은 상황에 관계없이 요소 사이의 간격을 일관되게 유지하는 데 특히 유용합니다.

클릭 영역 및 스타일링에 포함

패딩은 요소의 일부로 간주되므로 확장됩니다. 클릭 영역이 배경색과 이미지에 통합됩니다. 그러나 여백은 요소 외부에 속하며 이러한 측면에 영향을 주지 않습니다.

시각적 데모

차이점을 설명하기 위해 간단한 HTML 및 CSS 예를 살펴보겠습니다.

<div class="box">
    <div>A</div>
    <div>B</div>
    <div>C</div>
</div>

<div class="box padding">
    <div>A</div>
    <div>B</div>
    <div>C</div>
</div>

<div class="box margin">
    <div>A</div>
    <div>B</div>
    <div>C</div>
</div>

div.box > div {
    height: 50px;
    width: 50px;
    border: 1px solid black;
    text-align: center;
}
div.padding > div {
    padding-top: 20px;
}
div.margin > div {
    margin-top: 20px;
}

보시다시피 padding이 있는 요소는 세로 간격이 늘어난 반면, padding이 있는 요소는 세로 간격이 늘어났습니다. 마진은 1em 간격을 유지합니다.

위 내용은 CSS의 여백과 패딩: 간격 속성은 어떻게 다릅니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!