css margin padding

블로그를 좀더 자주쓰면서 꾸미기도 해보면서 알게된 css margin padding의 관계

1. margin, padding 개념

css에서 꾸미기하는 margin과 padding

css로 꾸미기 할때, 자주 보게되는 margin, padding, border의 개념도이다.

개인적으론,
- border는 거의 선(Line)의 느낌
- margin은 줄 간격
- padding은 text 장식(?)으로 이해되는데, 깊게 할건 아니라서 여기까지.

2. css margin, padding 적용 방식

실제로 사용할때 보면, margin이나 padding 뒤에 붙이는 파라미터 수가 다른데, 아래를 참고하여 확인

/* 네 면 모두 적용 */
padding: 1em;
margin: -3px;

/* 세로방향 | 가로방향 */
padding: 5% 10%;

/* 위 | 가로방향 | 아래 */
padding: 1em 2em 2em;

/* 위 | 오른쪽 | 아래 | 왼쪽 */
margin: 2px 1em 0 auto;

위에서 추가로 알아둘 것은
※ margin은 auto와 마이너스(-) 사용이 가능하다. padding은 안된다.

• margin 테스트 해볼 수 있는 곳 : https://developer.mozilla.org/ko/docs/Web/CSS/margin
• padding 테스트 해볼 수 있는 곳 : https://developer.mozilla.org/ko/docs/Web/CSS/padding

3. em과 px

2.에서 크기(길이) 단위로 px와 em을 쓰는데 차이점은 절대값(px)과 상대값(em)이다.
기준은 폰트사이즈가 기준이 된다.

font-size: 16px; 이라면,

2.에서 맨아래 margin의 경우 1em=16px 이다.