CSS] margin과 padding의 차이

문제 상황

아래 폼에서 매물 정보 글자를 조금 더 오른쪽과 아래로 배치하고 싶다.

이때 margin과 padding에 대한 이해가 필요하다.

 

margin/padding/border/height/width

개발자 도구(F12)를 키면 아래 이미지처럼 margin, padding, border, content 영역이 나온다. 자세한 설명은 아래를 참고하면 된다.

 

margin(주황) : 바깥쪽을 기준으로 떨어뜨린다. 주변 요소와 거리를 두기 위한 영역이다. 위 그림에서 margin을 주면 테두리를 포함한 매물 전체 폼이 이동하게 된다. (바깥쪽에서 움직이는 애 - 보통 container 움직일 때 사용)

h1 {
  margin-top:30px;
  margin-bottom: 20px;
  margin-left:150px;
  margin-right: 150px;
}

 

border(노랑) : content 영역을 감싸는 테두리 선을 의미한다.

h1 {
	border-top: 2px solid red;   /* 위쪽 테두리 (두께 : 2px, 선 형태 : solid, 선 색 : red) */
    border-right: 3px dotted blue; /* 오른쪽 테두리 */
    border-bottom: 4px dashed green; /* 아래쪽 테두리 */
    border-left: 1px solid black; /* 왼쪽 테두리 */
    border-radius: 10px; /* 모서리를 둥글게 */
}

padding(초록) : content 영역과 border 사이의 여백 영역을 의미한다. (안쪽에서 움직이는 애)

h1 {
  padding-top:150px;
  padding-bottom:150px;
  padding-right:150px;
  padding-left:150px;
}

content(파랑) : 요소의 실제 내용을 포함하고 있는 영역을 의미한다. height와 width로 영역의 크기를 조정할 수 있다.

h1 {
  width:150px;
  height:150px;
}

 

응용

개발자 도구를 키고, 아래 이미지처럼 content / padding / border / margin 영역을 확인하고 조절하면서 영역 간의 간격을 조절한다.