CSS padding, border, margin 요약 정리

 

CSS padding, border, margin 요약 정리를 해보겠습니다.

 

html 요소가 가지는 내용물의 크기 이외에 padding, margin으로 영역을 설정하여 원하는 대로 요소를 배치 할 수 있습니다.

 

border는 테두리인데 padding(내부 영역)과 margin(외부 영역)사이에 위치한 영역입니다.

 

출처 : TCP 스쿨

 

요렇게 그림으로 보면 이해가 쉬우실 겁니다.

 

그럼 어떻게 사용하는지 알아볼까요?

속성 값 적는 순서

패딩, 보더, 마진 모두 속성 값을 적는 순서가 똑같습니다.

 

padding : 10px 20px 30px 40px; 이렇게 최대 4개를 적을 수 있는데, 필요에 따라 아래와 같이 4가지 방식으로 적을 수 있습니다.

 

 

• 1개 : 4개 방향의 값을 한번에 적용합니다.
• 2개 : 상하/좌우 (첫번째 쓴 값이 top, bottom 두번째 쓴 값이 left, right의 값으로 적용됩니다.)
• 3개 : 위/좌우/아래 (첫번째 쓴 값이 top, 두번째 쓴 값이 left와 right, 세번째 쓴 값이 bottom의 값으로 적용됩니다.)
• 4개 : 위/오른쪽/아래/왼쪽 (첫번째 쓴 값이 top, 두번째 쓴 값이 right, 세번째 쓴 값이 bottom, 네번째 쓴 값이 left의 값으로 적용됩니다.)

 

만약 4개 방향의 값이 같다면 한 번만 써도 되고, 위아래가 같거나 좌우가 같거나 할 때 필요에 따라 빠르게 적을 수 있습니다.

padding

 

패딩값을 이용해서 내용물과 보더 사이의 간격을 설정할 수 있습니다.

 

내용물의 내부에 속하는 영역이기 때문에, 배경색 등의 영향을 함께 받습니다. 

 

 

border

 

보더는 테두리인데, 실선 점선 이중선 3차원 능선 등 설정 값이 다양합니다.

 

또한 선의 두께와 색상 등을 설정할 수 있는데, 저는 작업하면서 보더를 자주 쓰지는 않습니다.

 

여기서는 다음과 같은 개념만 이해하고 넘어가면 좋겠습니다.

 

• 패딩과 마진의 사이에 있는 영역이라는 것
• 보더는 영역을 차지하므로, 정확한 레이아웃을 위해서는 아래와 같이 CSS문서에 모든 요소에 대해 전처리를 해줘야 한다는 것

 

*{box-sizing: border-box;}

margin

 

마진을 이용하면 요소의 외부 여백을 설정할 수 있습니다.

 

그러나 블록 엘리먼트(박스)에만 적용이 가능하고, 자신의 크기만큼만 영역을 차지하는 인라인 요소에는 적용할 수 없습니다.

 

어떤 태그가 블록이고 인라인인지는 이전 글을 참고해주세요.

 

블록, 인라인, 인라인 블록 성질과 정렬 방법

 

margin: auto 라는 명령이 있는데, 부모 영역을 기준으로 해서 수평 방향으로 자동 가운데 정렬을 해 줍니다. 

 

또한 다른 명령에서도 자주 보았던 inherit를 설정할 수 있습니다. margin: inherit;을 하면 부모의 마진 속성값을 물려받습니다. 

마진을 줄 때 주의사항은, 너비가 100%면 마진을 줄 수 없으니 우선 너비를 100%이하로 줄여야 한다는 것 입니다.

 

마진은 음수로도 줄 수 있습니다!

 

마진값을 -로 주면, position을 쓰지 않고도 본인의 영역을 벗어나 다른 요소와 겹치는 UI를 간단하게 구현할 수 있습니다.

 

이상으로 CSS padding, border, margin 요약 정리를 마치겠습니다. 읽어주셔서 감사합니다.