CSS Margin / Padding
- 입력한 요소의 테두리 바깥의 공간과 테두리 안쪽의 공간의 넓이,높이를 조절할 수 있다.
margin/padding의 기본표기
Margin : 크기;
padding : 크기;
#. 마진(Margin).
마진(margin)은 margin를 기준으로 바깥 공간을 뜻한다.
다른 요소와의 간격을 제어할 때 값을 달리 주는 경우가 대부분이며, 요소를 부모요소의 정중앙에 줄 때에도 자주 사용된다.
#. 패딩(Padding).
패딩(padding)은 margin를 기준으로 안쪽 공간을 뜻한다.
대부분의 경우 자식 요소의 위치를 정할때 사용되며, 버튼 같은 요소를 만들때 디자인을 위해서 여백을 주기위해서도 사용된다.
#.Margin 예제 1.
<style>
.margin{
border:1px solid black;
margin: 10px;
}
</style>
<div class="margin">Hello World!</div>
<div class="margin">Hello World!</div>
<div class="margin">Hello World!</div>
📍출력물
Hello World!Hello World!Hello World!
⭐️위 출력물과 같이 예제입력문이 출력된 것을 볼 수 있다.
margin이 제대로 출력되는 것을 보기위해서 margin 속성도 입력했다.
그리고 2개의 요소가 10px 만큼 떨어져있는 것이 보인다.
하지만 실제로는 아래 사진과 같이 부여된 것이다.
상하좌우 모두 마진 10px만큼 적용된것이다.
그리고 두 요소 모두 10px씩 상하좌우가 적용되었다면 요소끼리의 마진은 20px만큼 적용되어야 한다고 생각할 수 있다.
하지만 같은 같이면 한번
만 적용되며, 둘 중 더 높은 값이 있다면 더 높은 값만 적용된다.
#. Margin 예제 2.
<style>
.margin12{
display: flex;
justify-content: space-between;
}
.margin1{
border:1px solid black;
margin: 50px 10px;
}
</style>
<div class="margin1">Hello World!</div><div class="margin1">Hello World!</div>
<div class="margin1">Hello World!</div><div class="margin1">Hello World!</div>
<div class="margin1">Hello World!</div><div class="margin1">Hello World!</div>
📍출력물
Hello World!Hello World!Hello World!Hello World!Hello World!Hello World!
⭐️마진 속성에 값을 2개 주었을때 첫번째 값은 위,아래 마진을, 그리고 두번째 값은 좌,우 마진을 조정한다.
마진 속성에 값을 4개 줄때에는 순서대로 , 위, 오른쪽, 아래, 왼쪽으로 값을 부여한다.
display:flex
로 블록요소인 div
태그를 좌우로 정렬시켰기 때문에 이런 경우에는 마진이 겹치지 않고 각각의 개인적인 공간에 추가되는 것을 볼 수 있다.


#. Margin 예제 3.
<style>
.margin2{
border:1px solid black;
margin: 50px auto;
}
</style>
<div class="margin2">Hello World!</div>
📍출력물
Hello World!
⭐️마진 값을 auto
로 주거나 0px auto
와 같은 방식으로 주면 (첫째값은 위,아래값으로 변경가능) 해당 요소를 부모 요소의 정중앙으로 가져다 놓는다.
위 사진과 같이 좌,우의 마진을 알아서 반반으로 맞추어준다.
#.Padding 예제 1.
<style>
.padding{
width:100px;
border:1px solid black;
padding: 10px;
}
</style>
<div class="padding">Hello World!</div>
📍출력물
Hello World!
⭐️패딩은 위에서 언급한데로 보더의 내부에 있는 공간을 이야기한다.
아래 사진을 보면 내부에 공간이 생겼음을 볼 수 있다.
패딩은 내부에 적용된다는 것을 제외하고는 값을 2개, 4개 부여했을때 적용되는 메커니즘은 동일하다.