CSS에서 margin과 padding을 사용하는 경우

질문 : CSS에서 여백과 여백을 사용하는 경우

---

margin 을 사용할 때와 padding 을 사용할 때를 결정할 때 사용해야하는 특정 규칙이나 지침이 있습니까?

답변

---

요약 : 기본적으로 테두리 나 배경이 있고 보이는 상자 내부의 공간을 늘리고 싶을 때를 제외하고는 모든 곳에서 여백을 사용합니다.

나에게 패딩과 여백의 가장 큰 차이점은 세로 여백은 자동으로 축소되고 패딩은 그렇지 않다는 것입니다.

1em 두 요소를 하나씩 고려하십시오. 이 패딩은 요소의 일부로 간주되며 항상 유지됩니다.

따라서 첫 번째 요소의 내용, 첫 번째 요소의 패딩, 두 번째 요소의 패딩, 두 번째 요소의 내용으로 끝납니다.

따라서 두 요소의 내용은 결국 2em 떨어져있게됩니다.

이제 패딩을 1em 여백으로 바꿉니다. 여백은 요소 외부에있는 것으로 간주되며 인접한 항목의 여백이 겹칩니다.

따라서이 예제에서는 첫 번째 요소의 내용 1em , 두 번째 요소의 내용으로 끝납니다. 따라서 두 요소의 내용은 1em 떨어져 있습니다.

이것은 옆에있는 요소에 관계없이 요소 주위에 1em 의 간격을 말하고 싶을 때 정말 유용 할 수 있습니다.

다른 두 가지 큰 차이점은 패딩이 클릭 영역과 배경색 / 이미지에 포함되지만 여백에는 포함되지 않는다는 것입니다.

 

div.box > div { height: 50px; width: 50px; border: 1px solid black; text-align: center; }
div.padding > div { padding-top: 20px; }
div.margin > div { margin-top: 20px; }

<h3>Default</h3>
<div class="box">
  <div>A</div>
  <div>B</div>
  <div>C</div>
</div>

<h3>padding-top: 20px</h3>
<div class="box padding">
  <div>A</div>
  <div>B</div>
  <div>C</div>
</div>

<h3>margin-top: 20px; </h3>
<div class="box margin">
  <div>A</div>
  <div>B</div>
  <div>C</div>
</div>

출처 : https://stackoverflow.com/questions/2189452/when-to-use-margin-vs-padding-in-css