겉보기에 미묘한 차이: 패딩 대 여백

TLDR: 여백이 콘텐츠/요소 주변의 테두리 밖에 있습니다. 패딩은 콘텐츠/요소 경계 내에 있습니다.


저와 같다면 개발/프로그래밍에 대한 초기 진출은 HTML과 CSS였습니다. 지금도 자바스크립트 기반 개발을 많이 하기 때문에 그때 배운 원칙은 매우 관련이 있습니다. (물론, 이것의 많은 부분은 CSS와 JSX가 HTML과 겉보기에는 매우 유사하지만 일반적인 중요성/힘에 기인할 수 있습니다. 그러나 저를 참고하십시오.)

어쨌든, 나는 CSS를 말 그대로 항상 사용하기 때문에, CSS를 처음 배울 때 되돌아가는 데 시간이 조금 걸렸던 겉보기에 미묘하지만 유용하고 중요한 차이점을 명확히 하기 위해 잠시 시간을 들이고 싶었습니다. 그것이 바로 차이점입니다. margin과 padding 속성 사이.

이것은 그다지 복잡하지 않지만 기억해야 할 가장 큰 것은 차이점이 내용과의 관계에 있다는 것입니다.

콘텐츠 주변의 경계를 밀어 넣거나 밀어낼 수 있다고 생각하면 margin 속성은 밀어낼 공간의 양과 관련이 있습니다. 일반적으로 주어진 여백 속성을 잠재적으로 볼 수 있거나 margin-top , margin-right , margin-bottom , margin-left 로 분류된 것을 볼 수 있습니다. 자체적으로 제공되고 단일 값이 나열되는 경우:

margin: 5px;

즉, margin-top , margin-right , margin-bottom , margin-left 값이 모두 5px입니다. 대신 두 개의 값으로 표시되는 경우:

margin: 5px 3px;

시계 방향 동작을 기준으로 읽습니다. 따라서 이 경우에는 margin-top 및 margin-bottom가 5px이고 margin-right 및 margin-left가 3px입니다. 세 가지 값이 표시되는 경우:

margin: 5px 3px 2px;

우리는 여전히 시계 방향 동작을 기반으로 읽습니다. 이 경우 5px에서 margin-top, 3px에서 margin-right 및 margin-left, 2px에서 margin-bottom를 갖게 됩니다. 4개의 값이 표시되는 경우 각각에 대해 하나씩이며 여전히 시계 방향으로 읽습니다.

margin: 5px 3px 2px 1px;

(margin-top 5px, margin-right 3px, margin-bottom 2px, margin-left 1px).


이제 패딩 속성입니다. 밀어 넣거나 빼는 아이디어로 돌아가면 패딩 속성은 밀어 넣는 공간의 양과 관련이 있습니다. 패딩은 요소 자체 내에서 콘텐츠와 테두리 사이의 공간 양입니다.

여백과 마찬가지로 패딩은 최대 4개의 값을 취할 수 있으며 정확히 같은 방식(시계 방향)으로 읽습니다. 그러나 언급할 가치가 있는 또 다른 차이점은 margin은 음수 값을 가질 수 있지만 padding은 음수 값을 사용할 수 없다는 것입니다.

대체로 이 두 가지 속성은 마스터해야 할 매우 중요한 속성입니다. 레이아웃을 수정하고 페이지의 간격을 파악하는 데 매우 유용하기 때문입니다. 차이점이 미묘해 보일 수 있지만 직선을 유지하면 아름다운 디자인 작업을 할 수 있습니다!