CSS의 외부 여백(margin)

요소의 외부 여백(공간)을 지정하는 단축 속성, 음수를 사용할 수 있음. 서로를 밀어내는 값

기본값, 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, left
  • margin : 10px 20px; = top, bottom(상하) / left,right(좌우)
  • margin : 10px 20px 30px; = top(상) / left,right(중) / bottom(하)
  • margin : 10px 20px 30px 40px; = top ,right, bottom, left

• 음수 : 겹쳐지는 효과

CSS의 내부 여백(padding)

요소의 내부여백(공간)을 지정하는 단축 속성, 요소의 크기가 커짐

기본값, 0 : 내부 여백 없음

단위 : px, em, vw 등 단위로 지정

% : 부모 요소의 가로 너비에 대한 비율로 지정