[HTML] margin? padding? 둘의 차이
우선 margin과 padding을 설명하기 전에 border가 무엇인지에 대해서 알아보도록 하겠습니다.
border는 우리가 만들어낸 component의 겉 테두리 입니다.
일반적으로는 다음의 그림처럼 component에 겉 테두리가 눈에 보이지 않습니다.
하지만 다음의 CSS내용을 추가함으로서
겉 테두리를 눈에 보이는 크만들어 낼 수 있습니다.
그렇다면 margin과 padding은 무엇인가?
margin과 padding은 HTML/CSS를 접하면서 흔히 사용할 수 있는 속성입니다.
이 둘은 Component(ex. tag)사이의 여백을 조정할때 사용합니다.
자세히 살펴보겠습니다.
위의 그림은 margin과 padding 그리고 border의 영역을 나타낸 사진입니다.
지금부터 위의 그림을 보면서 margin과 padding의 차이점에 대해서 알아보도록 하겠습니다.
margin은 border를 기준으로 밖의 영역의 여백이고,
padding은 border를 기준으로 안쪽 영역의 여백을 의미합니다.
[ padding 적용전 ]
padding 적용후
[ margin 영역과 padding 영역 ]
margin, border, padding, 마지막으로 content 순으로 박스가 정리되어있는 것을 확인할 수 있습니다.
정리하자면,
margin은 우리가 지정한 <div> 박스 혹은 다른 어떤 content의 내부에서 적용되는 여백이 아닌, content 밖에서 여백을 설정해주는 속성입니다.
padding은 <div> 박스 혹은 다른 어떤 content의 내부에서 되는 여백 속성입니다.
이때, 내부와 외부를 기준짓는 경계는 border입니다.
-추가-
일반적으로 여러 component들을 묶을 때 많이 사용하는 div 태그는
display 속성값을 block 값을 가지고 있습니다.
Q. ) block 속성이 무엇인가요?
A. ) 화면을 표현하는 CSS속성으로 display라는 속성이 있고
이의 값으로는 다음과 같은 3가지가 있습니다.
display: block
- block은 무조건 한줄을 차지합니다.
display: inline
- width/height 적용 불가
- margin/padding-top/bottom 적용 불가
- line-height 원하는 대로 적용 불가(span에 적용안되고 감싸고 있는 div 전체 크기에만 영향 등)
display: inline-block
2개의 짬뽕입니다. 제일 중요한 성질 자체는 inline과 비슷합니다.
동일 라인에 여러 태그를 붙일 때 쓸 수 있습니다.
다만 위 inline의 단점들을 커버하는 것이 inline-block입니다.
- width/height 적용 가능
- margin/padding-top/bottom 적용 가능
- line-height 적용 가능
그렇다면 왜 margin: 0 auto;을 사용하면 img나 <div>박스 등이 가운데 정렬이 되는 걸까?
이를 알기위해서는 이전에 설명했던 margin과 display:block; 요소를 잘 이해해야 합니다.
일단 margin 속성은 margin 공간 내에서 자유롭게 component를 이동시킬 수 있습니다.
다만, margin공간이 넉넉치 않을경우에는 margin을 통해 이동시킬 수 없습니다.
만약, component 양사이드에 margin공간이 충분하다면 좌우 margin값을 잘 이용해서
component를 가운데 배치할 수 있습니다.
그렇다면 언제 margin공간이 충분할까요?
이에 대한 정답은 없습니다.
다만, 일반적으로는 <div>와 같은 테그처럼 display값이 block인 테그들은 생성당시
한 줄의 공간을 차지하고,
한 열에서 자기자신의 크기(border와 padding을 포함한 크기)를 제외한
나머지 공간은 margin으로 채워지게 됩니다. 방금전 그림처럼 말이죠!
이때 이 margin공간을 이용해 가운데 정렬에 사용하는 방법이 margin: 0 auto;입니다.
그렇다면, auto라는 속성은 무엇일까요?
auto란? 자동으로 계산된 값을 지정해줌
자동으로 값을 계산한다니 무슨의미일까? 이는 해당 박스, 혹은 content가 지정된 width, 즉 너비를 제외하고 그 밖의 좌우 공간의 margin값을 균등하게 나눠가짐을 의미합니다.
양 사이드 margin 값을 균일하게 가짐으로서 해당 component가 중앙에 배치되게 되는겁니다.
# 실습을 통해 알아보도록 하겠습니다! (아래의 소스를 VSCODE에 붙여넣어주세요.)
<html>
<head>
<style>
.a {
width:70%; text-align: center; margin:0 auto; text-justify: center; padding: 30px 0; width:300px; height:100px;
}
</style>
</head>
<body width="1024px">
<div style="background-color: bisque;">
<h1 style="width:70%; text-align: center; margin:0 auto; text-justify: center; padding: 30px 0;">과연 Margin과 Padding이 무엇인가?</h1>
</div>
<div>
<h1 class="a">배경입니다.</h1>
<div class="a" style="background-color: coral; margin: 0;"><h3>1번입니다 | margin: 0;상태</h3></div>
<div class="a" style="background-color: cornflowerblue; "><h3>2번입니다 | margin: 0 auto;상태</h3></div>
<div class="a" style="background-color: darkgray; margin-left: 50%;"><h3>3번입니다 | margin-left: 50%;상태</h3></div>
</div>
</body>
</html>
위의 그림에서 보시는것처럼 첫번째 div태그는
자신의 padding+border+(내부 component) 영역말고는 마진영역을 가지게 되고,
두번째 div 태그처럼 margin:0 auto;를 통해 margin을 양 사이드로 균일하게 가지기도 합니다.
