CSS padding 그리고 margin 차이점
HTML 요소의 영역을 확장하고 펼치는데 유용하게 사용하는 CSS 스타일이 바로 padding(패딩)과 margin(마진)입니다. 예를 들어서 h3 태그를 사용하는데 이 태그의 주변 영역을 넓혀서 백그라운드의 색상을 확장하고 싶습니다. 이럴때 우리는 padding을 써야 할까요? margin을 써야 할까요? 여기에서는 백그라운드의 색상 영역을 확장하고 싶다고 했으니 padding을 사용해야 맞습니다.
padding
패딩은 요소의 영역을 몸을 부풀려 확장하는 역할을 합니다. 겨울에 추우면 패딩을 입죠? 패딩을 입으면 몸이 커지는 효과를 볼 수 있습니다. 그 원리라고 이해하시면 됩니다. 패딩은 자신의 몸둥아리를 늘리는 역할을 합니다. 아래에 <span>태그를 사용하여 간단한 텍스트를 넣어봤습니다.
인라인요소에 적용시키기
<span>안녕하세요. 친절한효자손입니다.</span>
이제 이 태그에 노란색 백그라운드 색상을 적용시킵니다. 그러면 아래와 같이 결과가 나타날 것입니다.
안녕하세요. 친절한효자손입니다.
그렇죠? <span>태그는 인라인 요소이기 때문에 크기를 갖지 않고 가로로 누적되는 성격을 가지고 있습니다. 그렇기에 텍스트에 딱 맞는 공간만 백그라운드가 차지하게 되었습니다. 이제 padding을 사용해 이 공간을 확대시켜 보겠습니다.
<span style="padding: 20px; background-color: yellow;">안녕하세요. 친절한효자손입니다.</span>
노란색 백그라운드까지 더해져서 현재 span태그에는 두 가지의 스타일이 적용된 상태입니다. 이렇게해서 결과를 살펴보면 아래와 같이 나타나게 됩니다.
안녕하세요. 친절한효자손입니다.
그렇습니다. 노란색 영역이 확장되었습니다. 그러나 위의 예시는 단순 비교입니다. 보시면 노란색 영역이 상/하/좌/우로 적용되어 마치 주변의 요소들을 모두 밀어낸듯 보이지만 사실은 그렇지 않습니다. 인라인요소에 padding을 적용시키면 텍스트의 상/하는 영향을 주지 않습니다. 즉 상/하는 패딩값이 적용되어도 영역이 확장되지 않습니다. 좌/우에 대한 영역만 영향을 받아 텍스트가 좌/우로 밀리는 현상이 발생합니다. 이 부분은 아래에 좀 더 자세한 비교 추가 설명이 나옵니다.
블록요소에 적용시키기
<div style="padding: 20px; background-color: yellow;">안녕하세요. 친절한효자손입니다.</div>그러면 이번에는 블록요소에 적용시켜 봅니다. 결과는 다음과 같습니다.
결과는 이렇게 자신의 영역이 확장되어 상/하/좌/우 모두 패딩 적용된 모습을 볼 수 있게 됩니다. 그런데 이렇게 각각 단순 비교를 하니 차이점을 잘 모르겠습니다. 확실히 비교해 봅시다.
제대로 비교하기
아래는 한글 입숨으로 무작위 문장을 생성한 결과입니다.
「안고, 길지 생생하며, 따뜻한 얼음이 뜨고, 뿐이다. 청춘의 크고 구하지 인생에 트고, 것은 일월과 인도하겠다는 이것이다. 같이 있을 싸인 쓸쓸하랴? 봄날의 가는 사랑의 현저하게 못하다 위하여서. 같은 싸인 기쁘며, 불어 청춘 목숨이 말이다. 품었기 이상의 가진 피가 군영과 것이다. 부패를 같은 얼마나 작고 원질이 것은 동산에는 뛰노는 때문이다. 끝에 가진 위하여 품고 바이며, 봄바람이다. 천고에 찾아 피에 착목한는 황금시대다. 예가 소리다.이것은 피가 위하여, 그들은 얼마나 할지니, 보배를 그리하였는가? 그들의 품에 보이는 같이, 방지하는 물방아 그것은 같으며, 갑 철환하였는가? 무엇이 행복스럽고 대고, 청춘의 것이다. 반짝이는 얼마나 천지는 맺어, 우리는 피부가 그리하였는가? 청춘에서만 기쁘며, 우리 날카로우나 목숨을 그들은 생생하며, 같은 보내는 것이다. 맺어, 이 위하여서, 이상을 이는 있는 칼이다. 이상이 위하여 그것은 많이 칼이다. 석가는 긴지라 위하여 듣는다. 가슴이 인생의 못할 힘차게 방지하는 끓는다. 갑 크고 얼음 현저하게 이상의 철환하였는가? 너의 그러므로 사랑의 피고, 운다. 피가 창공에 생명을 청춘을 있는 꽃 말이다. 피고, 우리 우리는 칼이다.」
먼저 노란색 백그라운드의 padding은 인라인 요소에 적용한 결과입니다. 보시면 좌/우에만 패딩 영향을 주고 상/하는 패딩 영향을 주지 않고 있습니다. 백그라운드 영역은 분명히 상/하/좌/우로 확장된 모습이지만 상/하에 대한 패딩이 실질적으로 영향을 주지 않기에 연달아오는 문장들의 줄 간격에 영향이 없습니다. 그렇기에 위쪽의 글자는 가려지고 아래쪽의 글자는 뚫려 나오는 것 같은 현상이 발생합니다. 인라인 요소는 크기를 가지고 있지 않기에 발생하는 문제입니다.
그에 반해 녹색 백그라운드는 현재 인라인-블록요소를 적용시켰습니다. span 태그에 display를 inline-block으로 적용시킨 상태입니다. 인라인-블록요소는 블록요소의 성격도 가지고 있으니 비교과 확실히 됩니다. 보시면 상/하의 패딩 영역이 확실히 보이죠? 텍스트들이 확장된 패딩 영역만큼 밀렸습니다. 상/하/좌/우 할 것 없이 말입니다. 블록요소는 크기를 가지고 있기 때문입니다. 혹시 display와 블록요소니 인라인요소니 이런 용어들이 다소 생소하시다면 아래의 글을 꼭 읽어보시기 바랍니다.
HTML 태그의 기본 속성을 변경하는 CSS display 옵션
padding 값에 따른 적용 범위
padding에 값을 몇 개를 입력하느냐에 따라 적용되는 영역의 위치가 다릅니다. 각 설명은 다음과 같습니다.
padding: 값; ▶ 1개만 입력한 경우 위쪽/오른쪽/아래쪽/왼쪽 순으로 적용됨
padding: 값, 값; ▶ 2개를 입력한 경우 첫번째는 위쪽/아래쪽, 두번째는 왼쪽/오른쪽 순으로 적용됨
padding: 값, 값, 값 ▶ 3개를 입력한 경우 첫번째는 위쪽, 두번째는 왼쪽/오른쪽, 마지막 세번째는 아래쪽 순으로 적용됨
padding: 값, 값, 값, 값 ▶ 4개를 입력한 경우 순서대로 위쪽, 오른쪽, 아래쪽, 왼쪽 순으로 적용됨
모두 동일한 패딩값을 적용시키려면 숫자를 한 번만 입력하면 되고 각 영역별로 따로 값을 설정하려면 4개의 값을 입력하면 됩니다.
margin
이번에는 margin(마진)에 대해 알아봅시다. 위에서 설명드렸던 패딩의 개념과 거의 같지만 백그라운드의 영역 차이가 발생합니다. 패딩은 자신의 몸둥이를 불리는 역할이라면 마진은 자신을 중심으로 자기장을 펼쳐서 영역을 확장하는 원리라고 생각하시면 됩니다. 보이지 않는 쉴드 오라를 펼친다고 해야 할까요? 중2병스러운 표현 방법이지만 저는 이렇게 이해하는게 가장 쉬웠습니다. 그럼 바로 예시로 살펴보겠습니다.
바로 제대로 비교하기
「안고, 길지 생생하며, 따뜻한 얼음이 뜨고, 뿐이다. 청춘의 크고 구하지 인생에 트고, 것은 일월과 인도하겠다는 이것이다. 같이 있을 싸인 쓸쓸하랴? 봄날의 가는 사랑의 현저하게 못하다 위하여서. 같은 싸인 기쁘며, 불어 청춘 목숨이 말이다. 품었기 이상의 가진 피가 군영과 것이다. 부패를 같은 얼마나 작고 원질이 것은 동산에는 뛰노는 때문이다. 끝에 가진 위하여 품고 바이며, 봄바람이다. 천고에 찾아 피에 착목한는 황금시대다. 예가 소리다.이것은 피가 위하여, 그들은 얼마나 할지니, 보배를 그리하였는가? 그들의 품에 보이는 같이, 방지하는 물방아 그것은 같으며, 갑 철환하였는가? 무엇이 행복스럽고 대고, 청춘의 것이다. 반짝이는 얼마나 천지는 맺어, 우리는 피부가 그리하였는가? 청춘에서만 기쁘며, 우리 날카로우나 목숨을 그들은 생생하며, 같은 보내는 것이다. 맺어, 이 위하여서, 이상을 이는 있는 칼이다. 이상이 위하여 그것은 많이 칼이다. 석가는 긴지라 위하여 듣는다. 가슴이 인생의 못할 힘차게 방지하는 끓는다. 갑 크고 얼음 현저하게 이상의 철환하였는가? 너의 그러므로 사랑의 피고, 운다. 피가 창공에 생명을 청춘을 있는 꽃 말이다. 피고, 우리 우리는 칼이다.」
패딩때 종합비교를 했던 문장을 그대로 가지고오되, padding 을 margin으로만 변경한 것입니다. 보시면 어떤 차이인지 보이시죠? 백그라운드의 적용 범위는 딱 텍스트까지일 뿐이지만 오라 쉴드를 펼쳐서 현재 노란색 백그라운드인 인라인 요소에는 패딩과 마찬가지로 좌/우에만 영향을 주었고 블록 요소는 상/하/좌/우 모두 영역을 주었습니다.
패딩과 마찬가지로 마진도 요소를 중심으로 영역을 확장하는 역할을 합니다. 단지 패딩처럼 자신의 몸둥이를 부풀릴 것이냐, 마진처럼 오라쉴드를 주변에 펼쳐서 영역을 넓힐 것이냐의 차이일 뿐입니다.
margin 값에 따른 적용 범위
margin도 padding과 같이 숫자를 몇 개 입력하느냐에 따라 적용되는 위치가 다릅니다. 마진도 패딩과 마찬가지입니다.
margin: 값; ▶ 1개만 입력한 경우 위쪽/오른쪽/아래쪽/왼쪽 순으로 적용됨
margin: 값, 값; ▶ 2개를 입력한 경우 첫번째는 위쪽/아래쪽, 두번째는 왼쪽/오른쪽 순으로 적용됨
margin: 값, 값, 값 ▶ 3개를 입력한 경우 첫번째는 위쪽, 두번째는 왼쪽/오른쪽, 마지막 세번째는 아래쪽 순으로 적용됨
margin: 값, 값, 값, 값 ▶ 4개를 입력한 경우 순서대로 위쪽, 오른쪽, 아래쪽, 왼쪽 순으로 적용됨
그렇습니다. 따라서 우리는 패딩과 마진을 어떻게 활용하느냐만 고민하면 됩니다.
활용 예시
가장 활발히 활용하는 영역은 바로 a태그입니다. a태그는 보통 클릭하면 특정 페이지로 이동하는 링크 버튼으로 많이 쓰이는데 이때 버튼의 영역을 넓혀서 사용자가 좀 더 클릭하기 편리하게 만드는게 좋습니다. 너무 작으면 누르기가 곤란하겠죠?
See the Pen a 버튼의 padding margin 영역 차이점 by rgy0409 (@rgy0409) on CodePen.
위의 예시에는 a태그에 지금까지 언급한 padding과 margin이 각각 적용된 상태입니다. 첫번째 a는 자신의 몸둥이를 늘렸으니 백그라운드 영역이 padding값만큼 확대되었고, 두번째 a는 margin을 사용했으니 주변 오라실드가 펼쳐진 상태입니다. 마우스를 올려보시면 첫번째 a버튼이 좀 더 클릭하기 쉽습니다. 패딩으로 인해 a의 영역이 확장된 상태이기 때문입니다. 따라서 백그라운드가 적용된 모든 곳에서 클릭이 가능합니다. 반면 두번째 a버튼은 텍스트에 마우스를 가져가야만 클릭이 가능합니다. 아무리 오라실드 영역이 펼쳐졌어도 그곳은 a태그의 클릭 영향을 받지 않는 상태가 되죠. 이런 차이점이 있습니다. 끝.
