margin, padding

margin, padding

margin

요소의 바깥쪽 여백

section {
    margin : 100px;
}

padding
요소의 안쪽 여백

section {
    margin : 100px;
}

방향에 따른 여백 설정

시계방향으로 회전하여 위 오른쪽 아래 왼쪽 순서

// 20px 같은 표현은 상하좌우 모두 20px을 의미합니다.
section {
    margin : 20px;
    padding : 20px;
}

// 30px 10px은 상하 30px, 좌우 10px을 의미합니다.
section {
    margin : 30px 10px;
    padding : 30px 10px;
}

// 30px 10px 20px 50px은 위 30px, 오른쪽 10px, 아래 20px, 왼쪽 50px을 의미합니다.
section {
    margin : 30px 10px 20px 50px;
    padding : 30px 10px 20px 50px;
}

// 30px 10px 40px은 위 30px, 좌우 10px, 아래 40px을 의미합니다.
section {
    margin : 30px 10px 40px;
    padding : 30px 10px 40px;
}