개요
margin과 padding 속성은 각각 바깥쪽 여백, 안쪽 여백을 의미합니다.
width, height 속성과 마찬가지로 숫자 뒤에 단위를 표시하여 적습니다.
margin과 padding는 border 을 경계로 나뉩니다.
방향
방향마다 여백을 다르게 설정할 수 있습니다.
margin: 20px 같은 표현은 상하좌우 모두 20px을 의미합니다
margin: 30px 10px은 상하 30px, 좌우 10px을 의미합니다.
margin: 30px 10px 20px 50px은 위 30px, 오른쪽 10px, 아래 20px, 왼쪽 50px을 의미합니다.
margin: 30px 10px 40px은 위 30px, 좌우 10px, 아래 40px을 의미합니다.
즉 방향의 위부터 시계방향으로 회전하여 위 오른쪽 아래 왼쪽 순서로 설정합니다.
사용법
#box{ margin: 10px; padding: 20px }
커서위를 가리킬때에 나타나는 색상
.auto-btn:hover,
.fold-btn:hover {
background-color: #3345b2;
}