여백을 설정하려면 CSS의 margin 및 padding 속성을 사용합니다.

Margin 설정하기

margin 속성을 사용하여 요소 주위의 외부 여백을 설정할 수 있습니다. 다음은 margin을 사용하여 박스를 상하좌우로 각각 20px의 여백을 설정하는 예제입니다.

.box {
  margin: 20px;
}

또는 상, 하, 좌, 우의 여백 값을 각각 지정할 수도 있습니다.

.box {
  margin-top: 10px;
  margin-right: 20px;
  margin-bottom: 30px;
  margin-left: 40px;
}

Padding 설정하기

padding 속성을 사용하여 요소 내부의 여백을 설정할 수 있습니다. 다음은 padding을 사용하여 박스 내부에 10px의 여백을 설정하는 예제입니다.

.box {
  padding: 10px;
}

상, 하, 좌, 우의 여백 값을 각각 지정할 수도 있습니다.

.box {
  padding-top: 5px;
  padding-right: 15px;
  padding-bottom: 10px;
  padding-left: 20px;
}

효과적인 여백 설정을 통해 웹 디자인을 더욱 프로페셔널하게 만들 수 있습니다.