HTML/CSS] 여백을 조절하는 속성_ margin, padding

 

텍스트의 여백을 조절하는 속성에는 박스모델의 여백인 margin과 padding이 있습니다.
박스모델을 사용해서 요소를 자유롭게 배치하고자 한다면 margin과 padding을 사용하는 건 필수입니다.
간단하게 margin과 padding에 대해 알아봅시다.

1. margin : 요소 밖의 여백을 설정

margin은 현재 선택된 요소를 가장 밖에서 둘러싸고 있는 여백을 의미합니다. 컨텐츠로부터 가장 끝에 위치한 margin의 영역을 조정하면 요소끼리의 간격을 조절하기에 용이합니다.

margin의 속성에는 위, 오른쪽, 아래, 왼쪽(시계방향)을 조절하는 margin-top, margin-right, margin-bottom, margin-left가 있습니다. 
보통은 px을 사용하나 %로도 조절이 가능합니다. 

 

 

2. padding: 콘텐츠와 테두리 사이의 여백을 설정

padding은 현재 선택된 요소를 가장 안쪽에서 둘러싸고 있는 여백을 의미합니다.
padding영역은 컨텐츠로부터 가장 가까이 위치한 영역이라고 생각하거나 테두리의 안쪽 여백이라고 생각하면 쉽습니다.
padding의 속성은 margin과 마찬가지로 위, 오른쪽, 아래, 왼쪽(시계방향)을 조절하는 
padding-top, padding-right, padding-bottom, padding-left이 있습니다.
padding 또한, 보통은 px을 사용하나 %로도 조절이 가능합니다. 

 

실전에서 한번 연습해보겠습니다. div태그로 감싸진 두 개의 글이 있습니다. 하나는 margin을 이용하고, 다른 하나는 padding을 이용해서 여백 크기를 조절해보도록 하겠습니다.

 

 

1) margin-top, margin-right, margin-bottom, margin-left

 

위, 아래, 좌, 우의 방향의 모든 margin에 값을 넣어주겠습니다.

 

첫번째 문단이 조절된 걸 확인할 수 있습니다. F12를 눌러 개발자모드로 확인하니 아주 잘 적용 되었네요.

4방향의 margin값을 달리할 때는 margin-top, margin-right, margin-bottom, margin-left를 모두 각각 적어줄 수도 있지만 한번에 4개를 모두 적어도 됩니다(개발자는 여러번 하는걸 귀찮아하니깐요 ㅋㅋㅋ )

 

2) margin: 위 우 아래 좌

margin: 50px 80px 100px 20px 이렇게 적으면 시계방향으로 margin: 위 우 아래 좌를 입력한 것과 같습니다. 위 사진과 같은 결과가 나오겠네요.

 

3) margin: 위&아래 좌&우

이번에는 margin 값을 두개만 적어보겠습니다. 값을 두개만 적으면 margin: 위&아래 좌&우 값이 입력된 것과 같습니다.

 

4) padding: 위&아래&좌&우

이번에는 값을 하나만 입력해보겠습니다. 이는 margin: 모든방향 이라는 의미로 모든 방향에 100px의 여백을 만들어주는 것과 같습니다.

 

padding을 사용하여 여백을 주는 방법은 margin과 동일합니다. 

1) padding-top, padding-right, padding-bottom, padding-left

2) pading : 위 우 아래 좌

3) padding: 위&아래 좌&우

4) padding: 위&아래&좌&우

 

< margin으로 콘텐츠를 중앙에 배열하기 >

자, 이번에는 margin을 사용하여 콘텐츠를 중앙에 배열해보겠습니다. 콘텐츠에 'width:300px'를 넣어주면 가로길이가 300px인 요소가 자동으로 왼쪽정렬됩니다.

 

이때, margin-left와 margin-right를 auto로 설정하면, 자동으로 좌우의 길이를 계산하여 요소가 중앙정렬하게됩니다.

짜잔~!

더 간단하게 쓰고 싶다면, margin: 위&아래 좌&우를 묶에서 하나로 써주셔도 됩니다