IT/CSS

[CSS 입문] 여백을 조절하는 속성

편네 2017. 4. 17. 10:51

1. margin 속성 - 요소 주변 여백 설정


margin-top: <크기> | <백분율> | auto

margin-right: <크기> | <백분율> | auto

margin-bottom: <크기> | <백분율> | auto

margin-left: <크기> | <백분율> | auto

margin: <크기> | <백분율> | auto


- margin 값이 4개면 그 순서는 top → right → bottom → left(시계 방향)이다.

- margin 값이 3개면 빠진 값은 마주보는 방향의 스타일 속성 값을 사용한다.



2. padding 속성 - 콘텐츠 영역과 테두리 사이 여백 설정


padding-top: <크기> | <백분율> | auto

padding-right: <크기> | <백분율> | auto

padding-bottom: <크기> | <백분율> | auto

padding-left: <크기> | <백분율> | auto

padding: <크기> | <백분율> | auto





<출처 - Do it! HTML5+CSS3 웹 표준의 정석>