[CSS] margin과 padding의 차이
제목과 문단, 문단과 문단 사이에 간격을 주고 싶을 때 margin 속성을 많이 사용합니다. 뷰어에서 상하좌우 여백을 줄때도 margin 속성을 적용합니다.
body {
margin : 5%;
}
이렇게 여백을 주면 뷰어 화면에서 상하좌우에 일정한 간격이 생겨 텍스트가 가득한 글을 읽을 때 가독성에 여유가 생깁니다.
그런데 여백을 줄 때 margin을 많이 사용하지만 padding이라는 속성도 있습니다. 이 둘은 적용된 결과를 보면 아무런 차이도 없기 때문에 구분 없이 사용하기도 합니다. 하지만 이 둘에는 아주 큰 차이가 있어 정확한 쓰임을 모르고 사용할 경우 의도하지 않은 결과가 생길 수 있습니다.
이 둘의 차이를 한마디로 정의하면 이렇습니다.
margin : 글상자(border) 바깥쪽 여백
padding : 글상자 안쪽 여백
이해에 도움이 되도록 그림으로 설명을 하겠습니다.
margin과 padding은 테두리가 보이지 않으면 똑같은 스타일이 적용된 것 처럼 보입니다. margin :5%;와 padding 5%;는 모두 상하좌우 여백이 5%씩 적용됩니다. 하지만 테두리를 그려보면 그 차이는 명확해집니다. margin:5%는 글자에 맞게 테두리가 그려지고 테두리 밖에 여백이 5%가 적용되지만 padding:5%는 글자와 테두리 사이에 5%의 여백이 적용됩니다.
예를 들어 아래처럼 글상자를 2개 만들고 글상자와 글상자 사이에 여백을 넣고 싶을때는 margin을 적용합니다. 아래 글상자는 padding을 0으로 적용했기 때문에 글상자와 글자 사이에 여백이 없습니다. 대신 글상자 바깥쪽 여백, 즉 margin이 20px가 되기 때문에 글상자가 서로 떨어집니다.
margin :20px; padding : 0px;
margin :20px; padding : 0px;
아래 글상자는 반대로 margin을 0으로, padding을 20px로 적용했습니다. 다른 스타일은 동일하고 margin과 padding만 바꿨는데 글상자의 크기부터 달라집니다. padding을 적용하면 글자와 글상자 사이에 여백이 생기기 때문에 글상자가 커집니다. 그리고 margin, 글상자 바깥쪽 여백은 0이기 때문에 두 글상자가 붙게됩니다.
margin :0px; padding : 20px;
margin :0px; padding : 20px;
위 글상자를 테두리와 배경색을 없애면 아래처럼 보입니다. padding이 margin보다 조금 넓게 여백이 적용되는 것을 볼 수 있습니다.
margin :20px; padding : 0px;
margin :20px; padding : 0px;
margin :0px; padding : 20px;
margin :0px; padding : 20px;
전자책을 만들 때 문단이나 전체 여백을 주고 싶다면 margin을 권합니다. padding은 글상자 안쪽의 여백이기 때문에 인용구처럼 한단을 들어가도록 표현하거나 내어쓰기를 할 때 사용하면 좋습니다. margin을 이용해서 내어쓰기를 표현할 때가 있는데 아래 예제를 보고 어느쪽이 더 좋은지 스스로 판단해 보기시 바랍니다.
▶ padding으로 내어쓰기 표현 : padding-left: 50px; text-indent: -2em; 적용
전자책을 만들 때 문단에 여백을 주고 싶다면 margin을 권합니다. padding은 글상자 안쪽의 여백이기 때문에 인용구처럼 한단을 들어가도록 표현하거나 내어쓰기를 할 때 사용하면 좋습니다. margin을 이용해서 내어쓰기를 표현할 때가 있는데 아래 예제를 보고 어느쪽이 더 좋은지 스스로 판단해 보기시 바랍니다.
▶ margin으로 내어쓰기 표현 : margin-left: 50px; text-indent: -2em; 적용
전자책을 만들 때 문단에 여백을 주고 싶다면 margin을 권합니다. padding은 글상자 안쪽의 여백이기 때문에 인용구처럼 한단을 들어가도록 표현하거나 내어쓰기를 할 때 사용하면 좋습니다. margin을 이용해서 내어쓰기를 표현할 때가 있는데 아래 예제를 보고 어느쪽이 더 좋은지 스스로 판단해 보기시 바랍니다.