margin
요소의 네 방향 바깥 여백 영역을 설정
margin-top, margin-right, margin-bottom, margin-left
속성값이 auto면 자동으로 좌우 혹은 상하를 맞춘다는 뜻
한줄로 작성 가능
div {margin: 100px 0 0 100px; } // top right bottom left 순으로 작성padding
요소의 네 방향 안쪽 여백 영역을 설정
padding-top, padding-right, padding-bottom, padding-left
div {margin: 100px 0 0 100px; } // top right bottom left 순으로 작성box-sizing
박스의 크기를 화면에 표시하는 방식을 변경
박스에 보더를 적용하면 보더 크기많큼 박스의 사이즈가 늘어나게 됨
이때 box-sizing에 border-box를 속성값으로 넣어주면 박스의 원크기 변경 없이 보더는 박스 안쪽으로 생기게 됨
참고 : box-sizing 예시
형제지간의 마진 병합
형제 요소의 margin-bottom과 bottom-top중 숫자가 큰 값으로 적용
Just do it!