HTML DIV tag : 영역 밖과 안쪽에 여백주기 - 마진과 패딩 Margin / Padding

DIV는 페이지 안에서 영역을 설정하는 것이다. DIV영역의 테두리와 바깥쪽과의 사이에 여백을 줄 때는 마진(Margin)을, 그리고 DIV영역 테두리와 안쪽과의 사이에 여백을 줄 때는 패딩(Padding)을 사용한다.

margin과 padding에 여백을 주는 방법은 같다.

margin: 1px 2px 3px 4px
padding: 1px 2px 3px 4px
순서는 위쪽에서 부터 시계방향이다. 즉, 위쪽 여백 1px, 오른쪽 여백 2px, 아래 여백 3px, 왼쪽 여백 4px을 뜻한다.

특정한 쪽에만 여백을 줄 때는 다음과 같이 하는 것이 편하다.

위쪽 바깥 여백    => margin-top: 1px
오른쪽 바깥 여백 => margin-right: 1px
아래쪽 바깥 여백 => margin-bottom: 1px
왼쪽 바깥 여백    => margin-left: 1px

위쪽 안 여백    =>  padding-top: 1px
오른쪽 안 여백 => padding-right: 1px
아래쪽 안 여백 => padding-bottom 1px
왼쪽 안 여백    => padding-left: 1px

[DIV 영역에 여백을 주지 않은 모양새]

<div style="border: 3px solid gold; float: left; height: auto; width: 200px;">
안쪽 여백을 주지 않았다. 글이 DIV영역 테두리에 바짝 붙어 있다. DIV영역 테두리와 바깥쪽도 여백 없이 붙어 있고, 안쪽도 여백없이 붙어 있다. 이하는 읽을 필요가 없다. 여백의 상태을 보여주기 위해 똑 같은 말을 계속 써 놓은 것이다.

여백을 주지 않은 모양새이다. 바깥 여백도 안 여백도 주지 않았다. 따라서, 이 DIV영역의 바깥쪽과 테두리 사이에 여백이 없이 딱 붙어 있다. 마찬가지로 DIV영역 테두리와 안쪽의 내용도 딱 붙어 있다.

안쪽 여백을 주지 않았다. 글이 DIV영역 테두리에 바짝 붙어 있다. DIV영역 테두리와 바깥쪽도 여백 없이 붙어 있고, 안쪽도 여백없이 붙어 있다. 이하는 읽을 필요가 없다. 여백의 상태을 보여주기 위해 똑 같은 말을 계속 써 놓은 것이다. 안쪽 여백을 주지 않았다. 글이 DIV영역 테두리에 바짝 붙어 있다. DIV영역 테두리와 바깥쪽도 여백 없이 붙어 있고, 안쪽도 여백없이 붙어 있다. 이하는 읽을 필요가 없다. 여백의 상태을 보여주기 위해 똑 같은 말을 계속 써 놓은 것이다. 안쪽 여백을 주지 않았다. 글이 DIV영역 테두리에 바짝 붙어 있다. DIV영역 테두리와 바깥쪽도 여백 없이 붙어 있고, 안쪽도 여백없이 붙어 있다. 이하는 읽을 필요가 없다. 여백의 상태을 보여주기 위해 똑 같은 말을 계속 써 놓은 것이다.

[바깥 여백을 준 모습]

<div style="border: 3px solid gold; float: left; height: auto; width: 200px; margin: 15px 25px 15px 0px;">
안쪽 여백을 주지 않았다. 글이 DIV영역 테두리에 바짝 붙어 있다. DIV영역 테두리와 바깥쪽도 여백 없이 붙어 있고, 안쪽도 여백없이 붙어 있다. 이하는 읽을 필요가 없다. 여백의 상태을 보여주기 위해 똑 같은 말을 계속 써 놓은 것이다.

바깥 여백을 주어, DIV영역 테두리와 바깥 내용과의 사이에 여백이 생겼다.
전체적인 모양새에 비추어 알맞는 수치를 주면 된다.
왼쪽은 여백을 굳이 줄 필요가 없어 주지 않았다.

안쪽 여백을 주지 않았다. 글이 DIV영역 테두리에 바짝 붙어 있다. DIV영역 테두리와 바깥쪽도 여백 없이 붙어 있고, 안쪽도 여백없이 붙어 있다. 이하는 읽을 필요가 없다. 여백의 상태을 보여주기 위해 똑 같은 말을 계속 써 놓은 것이다. 안쪽 여백을 주지 않았다. 글이 DIV영역 테두리에 바짝 붙어 있다. DIV영역 테두리와 바깥쪽도 여백 없이 붙어 있고, 안쪽도 여백없이 붙어 있다. 이하는 읽을 필요가 없다. 여백의 상태을 보여주기 위해 똑 같은 말을 계속 써 놓은 것이다. 안쪽 여백을 주지 않았다. 글이 DIV영역 테두리에 바짝 붙어 있다. DIV영역 테두리와 바깥쪽도 여백 없이 붙어 있고, 안쪽도 여백없이 붙어 있다. 이하는 읽을 필요가 없다. 여백의 상태을 보여주기 위해 똑 같은 말을 계속 써 놓은 것이다.

[바깥 여백과 안 여백을 준 모습]

<div style="border: 3px solid gold; float: left; height: auto; width: 200px; margin: 15px 25px 15px 0px; padding: 10px;">
안쪽 여백을 주지 않았다. 글이 DIV영역 테두리에 바짝 붙어 있다. DIV영역 테두리와 바깥쪽도 여백 없이 붙어 있고, 안쪽도 여백없이 붙어 있다. 이하는 읽을 필요가 없다. 여백의 상태을 보여주기 위해 똑 같은 말을 계속 써 놓은 것이다.

바깥 여백과 함께 안 여백을 주어 DIV영역 테두리와 바깥 내용과의 사이 그리고 안쪽 내용과의 사이에 여백이 생겼다.

안쪽 여백을 주지 않았다. 글이 DIV영역 테두리에 바짝 붙어 있다. DIV영역 테두리와 바깥쪽도 여백 없이 붙어 있고, 안쪽도 여백없이 붙어 있다. 이하는 읽을 필요가 없다. 여백의 상태을 보여주기 위해 똑 같은 말을 계속 써 놓은 것이다. 안쪽 여백을 주지 않았다. 글이 DIV영역 테두리에 바짝 붙어 있다. DIV영역 테두리와 바깥쪽도 여백 없이 붙어 있고, 안쪽도 여백없이 붙어 있다. 이하는 읽을 필요가 없다. 여백의 상태을 보여주기 위해 똑 같은 말을 계속 써 놓은 것이다. 안쪽 여백을 주지 않았다. 글이 DIV영역 테두리에 바짝 붙어 있다. DIV영역 테두리와 바깥쪽도 여백 없이 붙어 있고, 안쪽도 여백없이 붙어 있다. 이하는 읽을 필요가 없다. 여백의 상태을 보여주기 위해 똑 같은 말을 계속 써 놓은 것이다.

※ 위의 예에서는 DIV영역의 테두리를 (황금색으로) 표시하였기 때문에, 바깥 여백인 마진을 준 것과, 안 여백인 패딩을 준 모양이 서로 다르게 보인다.
테두리를 표시하지 않게 되면, 외관상으로는 마진을 준 것과 패딩을 준 것이 구분되지 않는다.

예컨데,
margin-right: 10px; padding-right:10px; 로 준 것과
margin-right: 20px; 로 준 것과
padding-right: 20px; 로 준 것은 모두 DIV영역 안의 내용과 밖의 내용과의 사이 여백이 20px이 되므로 결과적으로는 여백만을 볼 때는 모두 같은 결과가 되는 것이다.

그러나, DIV 영역 안의 내용이 차지하는 너비를 기준으로 보면 위 경우들은 서로 다르다.
예를 들어, DIV영역의 너비(width)를 100 px로 설정하였다고 가정해 보자.

마진은 얼마를 주던 DIV 안의 내용 너비에는 변화가 없다. 마진은 DIV 영역의 테두리를 기준으로 바깥쪽으로 밀어 내어 여백을 만들기 때문이다.

패딩은 DIV 영역안의 내용이 차지하는 공간을 줄여서 테두리와의 사이에 여백을 만들기 때문에, 패딩을 주면 실제 내용이 차지하는 공간은 DIV 영역보다 작게 된다.  왼쪽 패딩(padding-left)을 10px로 주면, 실제 내용이 차지하는 너비는 DIV 너비 100 px에서 10 px 이 줄어 든 90 px 이 된다.

따라서, 상황에 따라 마진과 패딩을 알맞게 적용하면 될 것이다.


>> HTML 태그 사용법 목록: DIV P SPAN IMG A HR FONT BR ...