CSS는 다음과 같이 구성되어 있습니다.

• CSS의 의미와 적용방법
• block과 inline의 차이점
• em과 rem의 차이
• Sass - CSS 전처리기
• CSS margin과 padding의 차이
• sticky 를 알아보자
• class와 id의 차이점
• CSS Flexbox - 자주 사용되는 것 정리

오늘은 CSS에서 margin(마진)과 paddin(패딩)의 차이에 대해서 정리해보겠습니다.

margin과 padding

제가 간단하게 그린 그림입니다.

content는 말 그대로 컨텐츠, 내용이고 border는 그 내용을 감싸는 테두리를 의미합니다.
이 border를 기준으로 바깥쪽 여백을 margin이라고 하고, 안쪽 여백을 padding이라고 하는 것입니다.

margin과 padding 값 설정하기

css코드에서 margin과 padding값을 주고 싶을 때 어떻게 할까요?
예시를 통해서 쉽게 알아보겠습니다.

1. margin : 10px 1px 1px 5px;
2. margin : 10px 3px 1px;
3. margin : 5px;

• 1번 예시는 4개의 값을 margin값으로 주었습니다.
  이는 왼쪽부터 상 ➡ 우 ➡ 하 ➡ 좌 순으로 값을 지정합니다. 시계 반대 방향이라고 생각하면 됩니다.

• 2번 예시는 3개의 값을 주었는데, 상 10px, 좌우 3px, 하 1px을 의미합니다.
• 3번 예시는 상우하좌 모두 동일하게 5px로 지정된 것입니다.

End.