CSS margin과 padding 한줄에 적을 때 순서


css 에서 박스모델의 margin과 padding을 설정해줄때, 몇가지 방법이 있습니다.


첫째. 각각 다 지정해주는 방법

margin-top: 10px;

margin-right: 20px;

margin-bottom: 15px;

margin-left: 5px;


혹은 margin: 10px 20px 15px 5px;

이때, 순서는 상우하좌 입니다. 시계방향으로 돌아가네요.



둘째. 상하의 margin 이 같고, 좌우의 margin 이 같을 때


margin: 10px 5px;



셋째. 좌우는 같은데, 상하가 다를 때


margin: 10px 5px 25px;


이때, 처음나오는 10px는 margin-top 의 값이고, 마지막에 나오는 25px는 margin-bottom이고

가운데, 5px 가 좌우 마진입니다.


padding의 경우도 마찬가지입니다.


정리하면, 아래 4가지.


margin: [margin-top] [margin-right] [margin-bottom] [margin-left];


margin: [margin-top] [margin-left = margin-right] [margin-bottom];


margin: [margin-top=margin-bottom] [margin-left = margin-right];


margin: [margin-top = margin-bottom = margin-left = margin-right];





'웹 개발 > CSS' 카테고리의 다른 글

박스모델 div 의 position 특성  (0) 2015.07.02
CSS margin, padding 한줄에 적을 때 순서  (2) 2013.01.09
Posted by 똑똑한 영장류