CSS 패딩 (padding) 마진(margin) 상하좌우 방향과 순서 사용법

 

CSS 패딩(padding)과 마진(margin)의 차이는 다음과 같다.

padding은 object 공간 내부의 여백

margin은 object 공간 외부의 여백을 의미한다.

 

*테두리 (border)를 기준으로 하기 때문에

이걸로 내부와 외부를 판단하면 된다.

 

반응형

 

마진은 블락요소(div)에만 먹히고,

인라인 요소인 <span>에는 먹히지 않는다.

 

margin은 오브젝트 바깥의 주변 공간을 추가하고,

padding은 요소 내부에 빈 공간을 만든다.

마진(margin)과 패딩을 쓰는 방법에는 총 2가지가 있다.

1. 세부 지정해서 쓰는 법 

margin-right: 10%;

margin-top: 10px;

padding-left: 5px;

 

이런 식으로 방향을 일일이 다 써서 쓰는 방법이 있다.

 

**양수 값으로 쓰면 : 요소간의 거리 넓어짐.

**음수 값: 요소 간의 거리 좁힘

ex) margin-right: -10px 

→ 거리가 가까워진다.

 

2. 한 속성에 다 쓰는 법 (순서에 따라 상하좌우 갈림)

margin: 5px 3px;

padding: 1px 1px 10px 10px;

 

한 개/ 두 개/ 세 개/ 네 개의 값일 때마다

해당하는 방향이 달라진다.

1. margin: 20px;
2. margin: 20px 10px;
3. margin: 10px 10px 30px;
4. margin: 10px 10px 20px 10px;

1. margin : 20px;

상하좌우 모두 20px로 지정 (1개)

 

2. margin-top: 20px 10px;

상하 20px / 좌우 10px 로 지정 (2개)

 

-보통 상하좌우를 대강 지정해놓고

세부조정은 margin-left/ margin-right로 따로 지정한다.

 

3. margin: 10px 10px 30px;

위 / 좌우 / 아래

순으로 여백 지정

 

4. margin: 10px 10px 20px 10px;

상/우/하/좌 

순으로 여백 지정

마진(margin)은 위와 같이 1~4개의 값에 따라 쓸 수 있다.

 

margin: 10% auto; (상하/ 좌우)

margin: 1em auto 2em; (상 / 좌우(가로방향) / 하)

 

이런 식으로, %나 em같은 단위를

쓸 수도 있고

auto도 적용할 수 있다.

패딩도 개수에 따라 적용되는 방향이 달라진다.

(콘텐츠 내의 여백을 의미)

 

패딩도 마진과 같은 규칙으로 

개수에 따라 상하좌우 방향이 정해진다.

 

헷갈리니까 되도록이면, margin/padding은 2개씩 (상하/좌우)

적용하는 방법을 쓸 것 같다.

 

margin : 값 auto  // 

margin : 0 auto (3번, 4번) 

**마진 auto 쓰는 방법 

 

https://velog.io/@sdc337dc/%EC%9E%90%EC%A3%BC-%EC%82%AC%EC%9A%A9%ED%95%98%EB%8A%94-CSS-%ED%99%9C%EC%9A%A9-margin-0-auto

자주 사용하는 CSS 활용 _ margin : 0 auto