CSS - margin & padding 차이점, 사용법

 

 

 

 

Padding과 Margin의 차이

 

Padding과 Margin은 자칫 헷갈릴 수 있는 개념이기 때문에 차이를 정확히 알아봅시다.

요소는 아래 그림 처럼 내용(content), 패딩(padding), 테두리(border)로 이루어져 있습니다. 파란 부분이 내용이고, 초록색 부분이 패딩, 그 밖에가 테두리입니다. 

 

 

 

 

패딩(Padding)은 내용(파란부분)과 테두리 사이의 '여유 공간' 입니다. border 까지가 요소이고,  Margin은 요소 주위의 여백입니다. 다른 요소와의 사이 공간이라고 할 수 있습니다. 

 

 

 

 

 

Padding을 주는 4가지 방법

 

Padding을 주는 방법에는 몇 가지가 있습니다.

 

 

1. 우선 가장 직관적인 방법은 top, bottom, left, right 를 각각 적어주는 방법입니다.

 

예시 코드 > 

<p> About css margin and padding. ex parameter.  </p>

<style>
  
  p {
  border: 1px solid blue;
  padding-top: 20px;
  padding-bottom: 40px;
  padding-left: 120px;
  padding-right: 60px;
}

</style>

 

결과 화면 >

 

 

 

 

2. padding 속성으로 한줄에 다 쓰기

 

 

한 줄에 top, bottom, left, right 를 모두 쓰고 싶으면 padding 속성을 쓰면 됩니다. 순서는 위(padding-top)부터 시계 방향으로 위, 오른쪽, 아래, 왼쪽 하나씩 쓰면 됩니다.

 

p {
  padding: 위 오른쪽 아래 왼쪽;
}

 

 

 

1번 방법과 똑같은 결과물인데 한 줄로 바꾼 코드 >

 

<p> About css margin and padding. ex parameter.  </p>

<style>
  
  p {
  border: 1px solid blue;
  padding: 20px 60px 40px 120px;
}

</style>

 

 

 

 

 

 

3. 위, 아래, 왼쪽, 오른쪽 패딩 크기가 다 같은 경우

 

 

만약 위, 아래, 왼쪽, 오른쪽에 똑같은 크기의 padding을 주고 싶을 땐, 아래 코드 처럼 한 번만 써주면 됩니다.

 

<p> About css margin and padding. ex parameter.  </p>

<style>
  
  p {
  border: 1px solid blue;
  padding: 30px;
}

</style>

 

 

 

 

4. 위, 아래가 같고 왼쪽, 오른쪽이 같은 경우

위, 아래에 똑같이 30px의 padding을 주고, 왼쪽, 오른쪽에 똑같이 100px의 padding을 주려면 아래 코드 처럼 써주면 됩니다. 

 

<p> About css margin and padding. ex parameter.  </p>

<style>
  
  p {
  border: 1px solid blue;
  padding: 30px 100px;
}
</style>

 

 

 

 

 

 

 

Margin

 

Margin을 주는 방법은 padding 과 똑같습니다.

 

 

1. 직관적인 방법

 

 

<p> About css margin and padding. ex parameter.  </p>

<style>
  
  p {
  border: 1px solid blue;
  margin-top: 50px;
  margin-bottom: 40px;
  margin-left: 200px;
  margin-right: 60px;
}

</style>

 

결과 화면 >

 

 

 

2. 한 줄에 적는 방법

 

<p> About css margin and padding. ex parameter.  </p>

<style>
  
 /* p {
  margin: 위 오른쪽 아래 왼쪽;
}
*/

p {
  margin: 50px 60px 40px 200px;
}

</style>

 

 

 

 

 

3. 위, 아래, 왼쪽, 오른쪽이 모두 같은 크기인 경우

 

<p> About css margin and padding. ex parameter.  </p>

<style>
  
p {
  margin: 70px;
}

</style>

 

 

 

4. 위, 아래 크기가 같고  왼쪽, 오른쪽 크기가 같은 경우

 

<p> About css margin and padding. ex parameter.  </p>

<style>
  
p {
  margin: 60px 100px;
}

</style>

 

 

 

 

 

 

Margin 가운데 정렬

 

요소를 가운데로 정렬하고 싶을땐, margin의 왼쪽과 오른쪽 값을 auto로 셋팅해줘야 합니다. auto는  '자동으로 알아서 계산' 하라는 의미입니다. 왼쪽과 오른쪽을 auto로 설정하면 왼쪽과 오른쪽 크기가 알아서 똑같이 셋팅되기 때문에 요소는 가운데 정렬이 되는 것입니다.

 

<p> About css margin and padding. ex parameter. About css margin and padding. ex parameter.About css margin and padding. ex parameter.About css margin and padding. ex parameter. </p>

<style>  
p {
  border: 1px solid blue;
  width: 500px;
  margin-left: auto;
  margin-right: auto;
}
</style>

 

 

결과 화면 >