CSS margin, padding 픽셀 속성 순서

이제 막 퍼블리셔가 된 나는 이것저것 헷갈리는게 많다.

특히 학원에서 포트폴리오를 만들고나서 한달가량 아무 작업을 안하다가 취직을 했기때문에 정말 사소한것들이 헷갈린다.

그 헷갈리는 것중에 하나가 CSS에서 마진, 패딩값을 적용하는 것인데

margin: 0 0 0 0. 이렇게 상,하,좌,우를 한번에 묶어서 쓰면 정말 굉장히 헷갈려서

그냥 상,하,좌,우에 한번씩 다 적용해본다.

그런데 그것도 margin: 0 0 100px 50px; 뭐 이런식으로 간단하게 되어 있을때만 가능한거라...

그냥 margin-left, margin-top 일일이 이런식으로 풀어써서 적용하는 경우가 대부분이다.

과장님의 코딩을 보면 굉장히 깔끔한데 나의 코딩을 보면 굉장히 지저분하다.

그래서 까먹지 않도록 정리해보려고 한다.

우선 4개일때는 시계방향으로 상,우,하,좌로적용된다.

margin: 10px 20px 30px 40px;로 적용하게 되면,

top 10px / left 20px / bottom 30px / right 40px이 적용되는것이다.

3개일때는 상, 좌우, 하로 적용된다.

marin: 10px 20px 30px;로 적용하게 되면

top 10px /side 20px /bottom 40px이 되는 것이다.

2개일때는 상하, 좌우로 적용되는데, 이것만큼은 헷갈리지 않는다.

왜냐하면, margin: 0 auto 를 자주 사용하기 때문이다. 

top,bottom은 0으로 들어가고 side는 auto로 들어가서 자동적으로 가운데로 컨텐츠들이 옮겨져 온다.

1개를 쓸때는 상,하,좌,우 모두 같은 수치가 적용된다.

margin: 100px을 적용하면 상하좌우 모두 100픽셀이 마진값으로 먹는것이다.

이제 절대 헷갈리지 말아야지....