[스크랩]margin, padding 설명

사전적 의미

• margin: 여백
• padding: 채워넣기

margin과 padding의 차이점

간단하게 말해 margin은 외부여백, padding은 내부여백입니다.

1. class네임이 recentComment인 레이어(div)에 margin-left를 준 경우

.recentComment	{margin-left:60px; }

2. class네임이 recentComment인 레이어(div)에 padding-left를 준 경우

.recentComment	{padding-left:60px; }

Margin사용하기

• margin-top
• margin-right
• margin-bottom
• margin-left

.recentComment	{margin-top:50px;}

라고 써줄 경우 recentComment라는 class 네임이 부여된 레이어(div)의 상단(top)에 50px 만큼의 외부여백을 두겠다는 말이 됩니다.

margin 한번에 쓰기

margin:50px; /* 사방 50px 여백*/
margin:50px 30px; /* 상하 좌우 */
margin:50px 30px 20px; /* 상 좌우 하*/
margin:50px 30px 20px 10px; /* 순서대로 top right bottom left */

사용 예

.recentComment1	{margin:50px;}
.recentComment2	{margin:50px 30px;}
.recentComment3	{margin:50px 30px 20px;}
.recentComment4	{margin:50px 30px 20px 10px;}

Padding 사용하기

• padding-top
• padding-right
• padding-bottom
• padding-left

사용법은 margin과 동일합니다.

사용 예

.recentComment1	{padding:50px;}
.recentComment2	{padding:50px 30px;}
.recentComment3	{padding:50px 30px 20px;}
.recentComment4	{padding:50px 30px 20px 10px;}