[비전공자를 위한 HTML/CSS] (28) CSS 속성- margin과 padding

margin과 padding의 비교

	+	-	auto	단위
margin	0	0	0	px, %, ...
padding	0	X	X	pt, %, ...

% 값은 상대적인 단위로써 기준점은 상하좌우 방향에 관계없이 모두 요소의 width 값을 기준으로 값이 결정된다.

div {
  border: 1px solid;
  width: 100px;
  height: 200px;
  margin: 10%;
  padding: 10%;
}

margin과 padding 모두 상하좌우 10px이 적용된다.

 

 

 

padding: 20px;

padding: 20px

padding: 0;

padding: 0;

padding: -20px;

padding: -20px;

 

width: 100px;
border: 1px solid;
padding: 0 auto;

padding: auto;