[03-4] CSS 기본기 익히기: padding, margin

[03-4] CSS 기본기 익히기: padding, margin

 

마진(margin)은 요소의 주변에 여백을 만들어줍니다. 그리고 패딩(padding)은 테두리와 그 안의 콘텐츠 사이의 여백을 만들어 줍니다. 이 두가지를 이용해 여백을 적절히 만들면 유저친화적인 UI를 제공할 수 있죠. 이번 시간에는 margin과 padding에 대해서 알아보도록 하겠습니다.

 

 

 

 

 

 

---

 

 

margin & padding

---

 

 

 

01. margin과 padding 비교

margin과 padding은 서로 비교하면서 알아가는 것이 이해하기 쉬울거라 생각합니다.

 

먼저 아래와 같이 버튼을 화면에 띄우게 됐을 때 푸른색 테두리 안에 'Button'이라는 텍스트 요소가 있는 모습을 확인할 수 있습니다.

 

여기서 푸른색 테두리는 'border'에 해당되고 'Button'이라는 텍스트는 'element'에 해당됩니다. 테두리 안 쪽 padding 덕분에 'Button'은 테두리에 붙어있지 않고 일정 간격 떨어져 있습니다. ⠀padding  은 이처럼 테두리와 그 안 쪽 요소의 간격을 지정해주는 역할을 합니다.

⠀margin  은 테두리 바깥쪽 여백을 지정해주는 역할을 합니다.

 

 

 

 

 

02. margin의 특성

추가로 알면 좋은 점은 margin은 두 요소가 같이 있을 때 둘 중에 가장 큰 값을 가진 margin값을 따른다는 것입니다. 아래 이미지를 보면 두 요소의 margin값이 30px이라 할지라도 둘 사이의 간격이 60px이 되는 것이 아니라 30px이 되는 것을 확인할 수 있습니다.

 

 

 

 

 

 

 

 

02. margin & padding 단위

margin과 padding의 정도는 속성값을 사용해 지정해줄 수 있습니다.

속성값과 관련해서 정리한 내용은 이 포스팅을 확인하시면 편합니다!

 

[03-3] CSS 기본기 익히기: 단위 속성 한 방에 정리! (px, %, vh, vw, vmin, vmax)

 

 

속성명	속성값	설명
margin	px	태그의 바깥쪽 여백을 px단위로 지정합니다.
	%	부모 태그 기준으로 태그의 바깥쪽 여백을 %단위로 지정합니다.
	vw	웹 브라우저의 너비를 기준으로 태그의 바깥쪽 여백을 백분율로 지정합니다.
	vh	웹 브라우저의 높이를 기준으로 태그의 바깥쪽 여백을 백분율로 지정합니다.

 

 

속성명	속성값	설명
padding	px	태그의 안쪽 여백을 px 단위로 지정합니다.
	%	부모 태그 기준으로 태그의 안쪽 여백을 %단위로 지정합니다.
	vw	웹 브라우저의 너비를 기준으로 태그의 안쪽 여백을 백분율로 지정합니다.
	vh	웹 브라우저의 높이를 기준으로 태그의 안쪽 여백을 백분율로 지정합니다.

 

 

 

 

03. 기존 박스 크기를 유지하면서 안쪽 여백 지정하기

CSS 파일에 똑같은 너비와 높이값을 부여하고 안쪽 여백을 0px, 30px로 지정해주면 여백이 적용되기는 하지만 박스의 크기가 달라지는 것을 볼 수 있습니다. 이 때 ⠀box-sizing: border-box⠀ 속성을 추가해주면 해결됩니다!

 

 

 

 

 

 

 

---

이번 포스팅에서는 기본적인 개념인 margin과 padding에 대해서 알아봤습니다. 다음 포스팅에서는 블록요소와 인라인요소로 찾아뵙겠습니다!