요소의 외부 여백(공간)을 지정하는 단축 속성, 음수를 사용할 수 있음. 서로를 밀어내는 값
기본값, 0 : 외부 여백 없음
auto : 브라우저가 여백을 계산. (가로,세로 너비가 있는 요소의 가운데 정렬에 활용)
단위 : px, em, vw , % 등 단위로 지정
.container .item {
width: 100px;
height: 100px;
background-color: orange;
margin: 20px;
/* margin-bottom: 20px; margin-top, margin-bottom, margin-left, margin-right*/
}
단축 속성
margin : 10px;
= top ,right, bottom, leftmargin : 10px 20px;
= top, bottom(상하) / left,right(좌우) margin : 10px 20px 30px;
= top(상) / left,right(중) / bottom(하)margin : 10px 20px 30px 40px;
= top ,right, bottom, left음수 : 겹쳐지는 효과
요소의 내부여백(공간)을 지정하는 단축 속성, 요소의 크기가 커짐
기본값, 0 : 내부 여백 없음
단위 : px, em, vw 등 단위로 지정
% : 부모 요소의 가로 너비에 대한 비율로 지정