요소에 여백 넣기

HTML 요소간 너무 붙어있으면 웹페이지가 답답해 보일 수 있고, 너무 떨어져 있으면 웹페이지가 텅 비어 보일 수 있습니다.

그렇다면 요소간 여백을 조절하려면 어떻게 해야 할까요? 여백을 조절할 때는 앞에서 배운 margin과 padding를 사용합니다.

margin

요소의 주변(바깥) 여백을 조정하는 데 사용합니다. 여백은 요소 주위의 빈 공간을 말하는데, 비유하자면 "요소 주변에 빈 자리"라고 생각하면 도움이 됩니다.

마치 책과 책 사이에 빈 공간을 두는 것과 같습니다.

margin은 요소 주위에 여백을 추가하거나 제거하여 요소들 사이의 간격을 조절할 수 있습니다.

여백은 픽셀(px), 백분율(%) 등의 단위로 지정할 수 있습니다.

요소의 내부(안쪽) 여백을 조정하는 데 사용합니다. 내부 여백은 요소의 내부에 있는 빈 공간을 말하는데, "요소 내부에 빈 자리"라고 생각하면 이해하기 쉽습니다.

이는 마치 책의 표지와 책 페이지 사이에 공간을 두는 것과 같습니다.

padding은 요소의 내부 여백을 추가하거나 제거하여 요소 내부의 내용과 테두리 사이의 간격을 조절할 수 있습니다.

내부 여백도 픽셀(px), 백분율(%) 등의 단위로 지정할 수 있습니다.

예를 들어 다음과 같은 CSS 코드는 <div> 요소의 margin과 padding을 설정하는 예시입니다

margin, padding 설정
div {
  margin: 10px;
  padding: 20px;
}

위의 코드는 <div> 요소 주위에 10픽셀의 margin을 추가하고, <div> 요소 내부에는 20픽셀의 padding을 적용합니다.

코드프렌즈 PLUS 멤버십 가입 or 강의를 등록해 주세요!