CSS

안쪽 여백과 바깥 간격 구분하기

padding은 상자 안쪽 여백이고 margin은 바깥 간격입니다.

이럴 때 필요해요

버튼의 누를 영역과 버튼 사이의 거리를 따로 조절합니다.

상자 안의 글자가 테두리에 너무 붙었다면 padding을 늘립니다. 이 여백은 콘텐츠와 테두리 사이에 생깁니다.

상자 바깥에서 다른 요소와 떨어뜨릴 때는 margin을 사용합니다. 버튼 사이 margin을 늘려도 버튼 자체의 누를 영역이 그만큼 넓어지지는 않습니다.

width와 padding을 함께 지정할 때는 전체 너비가 예상과 달라질 수 있습니다. border-box는 지정한 너비 안에 padding과 border를 포함합니다. margin 상쇄 같은 예외는 기본 차이를 익힌 다음 읽어도 됩니다.

동작을 설명하는 읽기 전용 예제입니다.

example.css

.reserve {
  box-sizing: border-box;
  width: 160px;
  padding: 16px;
  margin-bottom: 16px;
}

css · 읽기 전용6줄

reserve 클래스의 안쪽 여백과 아래쪽 바깥 간격을 각각 지정합니다.

버튼 글자 주변의 누를 영역을 넓히려면 무엇을 바꿀까요?

생각할 단서 예제의 값을 하나 바꿔 보고, 바뀌는 부분과 그대로인 부분을 구분해 보세요.

예시 답변 확인

padding을 늘립니다. 다른 버튼과의 바깥 간격은 margin 또는 부모의 gap으로 조절할 수 있습니다.

문장을 그대로 외우기보다 예제의 값과 실행 흐름을 떠올리며 설명해 보세요.