[CSS] Box Model의 축약 표현

참고

- http://tcpschool.com/css/css_boxmodel_margins

 

content, padding, border, margin을 box model이라고 한다.

 

margin, padding을 한꺼번에 쓰고 싶을 때 축약해서 쓸 수 있다.

top, right, bottom, left (시계방향)순으로 값을 쓰면 된다.

헷갈리는 것만 margin을 예로 들어 아래에 정리해보자.

​

{margin: ↕ ↔;}

= {margin-top, margin-bottom: ↕ ;

margin-right, margin-left: ↔;}

​

{margin: ↑ ↔ ↓;}

= {margin-top: ↑;

margin-right: ↔;

margin-bottom: ↓;

margin-left: ↔;}

​