CSS margin
margin
요소의 바깥쪽 여백을 설정한다
문법
margin : length;
margin : %;
margin : auto;
정의
- margin-top 속성은 요소의 위쪽의 바깥쪽 여백을 설정
- margin-right 속성은 요소의 오른쪽의 바깥쪽 여백을 설정
- margin-bottom 속성은 요소의 아래쪽의 바깥쪽 여백을 설정
- margin-left 속성은 요소의 왼쪽의 바깥쪽 여백을 설정
| margin 값 | 설명 |
|---|---|
| margin: 10px | 위쪽, 오른쪽, 아래쪽, 왼쪽 여백 모두 10px |
| margin: 10px 11px | 위쪽, 아래쪽 여백 10px / 왼쪽, 오른쪽 여백11px |
| margin: 10px 11px 12px | 위쪽 여백 10px / 왼쪽 오른쪽 여백11px / 아래쪽 여백12px |
| margin: auto | 자동값, 기본값 |
| margin : 0 auto | 가운데 정렬(블록구조) |
| margin-top: 10px | 위쪽 바깥 여백 10px |
| margin-right: 11px | 오른쪽 바깥 여백 11px |
| margin-bottom: 12px | 아래쪽 바깥 여백 12px |
| margin-right: 11px | 오른쪽 바깥 여백 11px |
| margin-left: 11px | 왼쪽 바깥 여백 11px |
| padding-top: 10px | 위쪽 여백 10px |
| padding-right: 10px | 오른쪽 여백 10px |
| padding-bottom: 10px | 아래쪽 여백 10px |
| padding-left: 10px | 왼쪽 여백 10px |
| padding: 10px | 왼쪽, 오른쪽, 위, 아래 여백 모두 10px |
| padding: 10px | 왼쪽, 오른쪽, 위, 아래 여백 모두 10px |
| padding: 10px 11px | 위, 아래 여백 10px / 왼쪽, 오른쪽 여백11px |
| padding: 10px 11px 12px | 왼쪽 여백 10px / 위, 아래 여백 11px / 오른쪽 여백 12px |
| padding: 10px 11px 12px 13px | 위 10px / 오른쪽 11px / 아래 12px / 왼쪽 13px |