margin
- 영역의 바깥쪽으로 여백
- auto, 마이너스 사용가능 (ex. margin:0 auto;, margin:-20px;)
- 상, 하, 좌, 우 각각 속성을 줄수 있음 (margin-top,margin-left,margin-right,margin-bottom)
- 한번에 단축속성으로 사용할수 있음.
margin: 상단, 우측, 하단, 좌측 (margin:5px 10px 15px 20px)
margin: 상하, 좌우 (margin: 10px 20px)
margin: 상, 좌우, 하 (margin: 5px 10px 15px)
margin: 상하좌우 (margin:5px)
- 요소사이의 좌우 마진은 겹치지 않지만, 상하좌우의 마진은 큰 값에 맞춰 겹쳐서 출력됨.
(ex. li { margin-top:5px; margin-bottom:10px } -> 이경우 큰수 맞춰져 두 요소의 상하여백은 10px)
padding
- 영역 안쪽으로 여백
- auto, 마이너스 사용 불가능.
- 상, 하, 좌, 우 각각 속성을 줄수 있음 (padding-top,padding-left,padding-right,padding-bottom)
- 단축속성 사용가능
padding: 상단, 우측, 하단, 좌측 (padding:5px 10px 15px 20px)
padding: 상하, 좌우 (padding: 10px 20px)
padding: 상, 좌우, 하 (padding: 5px 10px 15px)
padding: 상하좌우 (padding:5px)
