(CSS 코딩일기) padding, margin, border

1. Padding

영역 안쪽에 여백을 넣을 때 사용합니다.

숫자의 순서는 시계 방향으로 0시 -> 3시 -> 6시 -> 9시 순서입니다.

패딩 값을 각각 주고 싶을 때 쓰는 속성들입니다. 상,우,하,좌 값을 따로 썼던 걸 속성으로 나눈 거라고 생각하면 됩니다. 아래의 두 코드는 똑같은 코드입니다.

padding: 16px 8px 24px 10px;

padding-top: 16px;
padding-right: 8px;
padding-bottom: 24px;
padding-left: 10px;

2. Margin

영역 바깥쪽 여백을 넣을 때 사용합니다. 특히 좌우, 바깥 여백의 경우에는 auto 라는 것을 사용해서 자동으로 채울 수 있었습니다. 여기서 주의할 점은 요소의 width 속성이 정해져 있어야 자동으로 채울 수 있습니다.

padding이랑 마찬가지로 값을 각각 주고 싶을 때 쓰는 속성들입니다. 아래의 두 코드는 똑같은 코드입니다.

margin: 16px 8px 24px 10px;

margin-top: 16px;
margin-right: 8px;
margin-bottom: 24px;
margin-left: 10px;

3. border

border은 테두리라는 속성입니다. 

border: 1px solid #dedede;
border-radius: 8px;

위 코드를 입력하면 굵기가 1인 solid(모양) 일반적인 테두리의 모서리 둥글기가 8px이라는 박스가 나타납니다.