Padding
영역 안쪽에 여백을 넣을 때 사용한다.
상하좌우 한번에
padding: 8px;상하, 좌우 각각
padding: 16px 8px;상, 좌우, 하
16px 8px 24px;상, 우, 하, 좌
padding: 16px 8px 24px 10;x;‼️숫자의 순서는 시계 방향으로 0시 -> 3시 -> 6시-> 9시 순서로 외우면 된다.‼️
padding- 속성
패딩 값을 각각 주고 싶을 때 쓰는 속성
아래의 두 코드는 똑같다.
padding: 16px 8px 24px 10px;padding-top: 16px;
padding-right: 8px;
padding-bottom: 24px;
padding-left: 10px;Margin
영역 바깥쪽 여백을 넣을 때 사용한다.
특히 좌우 바깥 여백의 경우에는 auto라는 걸 사용해서 자동으로 채울 수 있다. 여기서 주의해야할 점은 요소의 width 속성이 정해져 있어야 자동으로 채울 수 있다.
상하좌우
margin: 8px;상하, 좌우
margin: 16px 8px;자동으로 채우기
width: 600px; /* 반드시 너비가 정해져 있어야 자동으로 채울 수 있다.*/
margin: 16px auto;상, 좌우, 하
margin: 16px 8px 24px;상,우,하,좌
margin:16px 8px 24px 10px;‼️숫자의 순서는 시계 방향으로 0시 -> 3시 -> 6시-> 9시 순서로 외우면 된다.‼️
margin- 속성
paddin이랑 동일하게 값을 각각 주고 싶을 때 쓰는 속성이다.
역시 아래 두 코드는 똑같은 코드다.
margin: 16px 8px 24px 10px;margin-top:16px;
margin-right: 8px;
margin-bottom: 24px;
margin-left: 10px;