[CSS]margin과 padding

CSS 에서는 HTML의 모든 요소들이 박스 형태로 되어 있다고 해서 이를 박스모델이라고 부른다. 이 모든 요소는 border라는 테두리로 둘러싸여 있고 그 테두리와 컨텐츠 사이에는 padding 이라는 공간이, 테두리와 다른 요소들과의 사이에는 margin 이라는 공간이 존재한다. 이를 그림으로 표현해 보면 아래와 같다.

 

1. 클래스 명이 skeleton인 레이어(div)를 기준으로 안쪽에 padding이 있고 그안에 내용(content)이 있다

2. 클래스 명이 skeleton인 레이어(div)를 기준으로 바깥쪽에는 다른요소와 사이에 margin이 있다

Note

• padding : 안쪽여백
• margin : 바깥쪽여백

 

Margin 사용하기

 

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

 

.skeleton {margin-top:50px ;}

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

 

margin 한번에 쓰기

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

사용예

.skeleton {margin:50px;}
.skeleton {margin:50px 30px;}
.skeleton {margin:50px 30px 20px;}
.skeleton {margin:50px 30px 20px 10px;}

 

Padding 사용하기

 

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

 

.skeleton {padding-top:50px ;}

위와 같이 써줄경우 skeleton이라는 class 네임이 부여된 레이어(div)의 안쪽 상단(top)에 50px 만큼의 내부여백을 두겠다는 말이 된다.

 

사용예

.skeleton {padding:50px;}
.skeleton {padding:50px 30px;}
.skeleton {padding:50px 30px 20px;}
.skeleton {padding:50px 30px 20px 10px;}