[css] CSS에서 여백 대 패딩을 사용하는 경우 [닫기]

TL; DR : 기본적으로 테두리 나 배경이 있고 표시되는 상자 내부의 공간을 늘리려는 경우를 제외하고는 모든 곳에서 여백을 사용합니다.

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

안쪽에 패딩이있는 두 요소를 고려하십시오 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>

답변

$(".outer").click(function(e) {
  console.log("outer");
  e.stopPropagation();
});

$(".inner").click(function(e) {
  console.log("inner");
  e.stopPropagation();
});

.outer {
  padding: 10px;
  background: red;
}

.inner {
  margin: 10px;
  padding: 10px;
  background: blue;
  border: solid white 1px;
}

<script src="http://code.jquery.com/jquery-latest.js"></script>

<div class="outer">
  <div class="inner" style="position:relative; height:0px; width:0px">

  </div>
</div>