CSS에서 margin과 padding

Margin과 Padding 차이

[날마다 3분 CSS] 글자와 상자

위의 포스트를 통해 글자와 상자를 이해한 뒤 보면 이해하는데 도움이될 것이다.

설명하기전 브라우저의 개발자도구를 열어서 쉽게 볼 수 있는 HTML 박스모델을 보면서 이해하면 더 쉽다.

 

👁‍🗨한줄요약
각 HTML 요소간의 간격을 margin , 보더(요소의 테두리선)와 요소와의 간격을 padding 이라고 한다.
예를들어 네모박스(보더)안에 글자가 있는 박스 여러개가 가로로 줄지어있다면 , margin은 박스간의 간격이고
padding은 네모박스 경계선과  글자의 위치의 간격이다

 

Margin, Padding 사용법

margin은 요소를 기준으로 바깥쪽 다른 요소들과의 간격을 나타낸다

padding는 보더( 테두리선이라고 생각하면 쉽다 )를 기준으로 요소와 보더의 간격을 나타낸다.

 

Margin

 

Padding

margin과 padding의 속성 사용법은 4가지가 있다.

💬margin, padding 기본특성
시계방향(위, 오른쪽, 아래, 왼쪽) 순서로 값을 주면 된다.
보더(테두리)를 기준으로 밖과 안의 간격을 조절하는 것만
다르며 아래에서 속성을 사용하는 법은 margin과 padding 모두 동일하다.

속성 4개 사용

• 4개의 속성은 기본 특성과 마찬가지로 위부터 시계방향(위, 오른쪽, 아래, 왼쪽) 순서로 값을 주면 된다.
• 예: margin: 10px 5px 10px 5px / padding : 10px 5px 10px 5px

속성 3개 사용

• 3개속성은 위, 오른쪽/왼쪽, 아래 값이다.
• 예: margin: 10px(위) 5px(오른쪽,왼쪽) 10px(아래) / padding: 10px(위) 5px(오른쪽,왼쪽) 10px(아래)

속성 2개 사용

• 2개의 속성만 사용할 경우, 첫번째 값은 위와 아래 / 두번째 값은 오른쪽과 왼쪽 여백을 의미한다.
• 예: margin: 10px(위, 아래 값) 5px( 왼쪽, 오른쪽 값) / padding: 10px(위, 아래 값) 5px( 왼쪽, 오른쪽 값)

속성 1개 사용

• 1개의 속성만 사용할 경우, 위, 오른쪽, 아래, 왼쪽 모두 같은 값을 사용하게 된다.
• 예 : margin: 10px ( 위,왼쪽,아래,오른쪽 ). / padding: 10px ( 위,왼쪽,아래,오른쪽 )

See the Pen w/h by Zookeeper0 (@zookeeper0) on CodePen.

---

개별속성으로 부여하는 방법

한방향에만 특성을 부여하고 싶은 경우 개별 특성 부여속성을 사용하면 된다.

margin-방향 / padding-방향

margin-top : 10px    

margin-bottom : 50px

margin-left : 100px

margin-right : 20px

 

padding-top : 10px   

padding-bottom : 50px

padding-left : 100px

padding-right : 20px