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

CSS를 작성할 때, 경우에 사용하는 결정에 사용되어야 할 특정 규칙이나 지침이 margin때 사용하는 방법은 padding?

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>

안쪽 여백은 안쪽에 있고 여백은 블록 요소 바깥쪽에 있습니다.

• 여백을 사용하여 블록을 외부와 분리하십시오.
• 안쪽 여백을 사용하여 내용물을 블록 가장자리에서 멀리 이동하십시오.

예제, 다이어그램, 심지어 '직접 시도해보기'로 이것을 설명하는 최고가 여기 있습니다 .

아래 그림은 그 차이에 대한 즉각적인 시각적 이해를 제공한다고 생각합니다.

명심해야 할 것은 표준 호환 브라우저 ( IE quirks는 예외입니다 )는 콘텐츠 부분 만 주어진 너비로 렌더링하므로 레이아웃 계산에서이를 추적하십시오. 또한 테두리 상자는 부트 스트랩 3을 지원 하는 컴백을 보여 줍니다.

질문에 대한 더 많은 기술적 설명이 있지만 , 사용시기와 방법을 선택하는 데 도움이되는 여백과 패딩 에 대해 생각할 방법을 찾고 있다면 도움이 될 것입니다.

블록 요소를 벽에 걸려있는 그림과 비교하십시오.

• 브라우저 창에서 바로 벽과 같다.
• 내용은 단지 사진과 같다.
• 이익률은 바로 액자 사진 사이의 벽 공간 같다.
• 패딩은 단지 사진 주위에 매트 같다.
• 테두리 단지 프레임의 경계 같다.

여백과 패딩을 결정할 때 벽의 다른 것들과 관련하여 요소를 배치 할 때 여백 을 사용 하고 요소 자체의 모양을 조정할 때 패딩 을 사용하는 것이 좋습니다. 여백은 요소의 크기를 변경하지 않지만 패딩은 일반적으로 요소를 ¹ 더 크게 만듭니다 .

¹ 이 기본 상자 모델은 box-sizing속성 으로 변경할 수 있습니다 .

마진 vs 패딩 :

1. 요소에서 여백은 해당 요소와 페이지의 다른 요소 사이의 거리를 만들기 위해 사용됩니다. 패딩은 내용과 요소의 경계 사이의 거리를 만드는 데 사용됩니다.

2. 여백은 패딩이 요소의 일부인 요소의 일부가 아닙니다.

아래 여백 대 패딩 에서 추출한 이미지를 참조하십시오 -CSS 속성

에서 https://www.w3schools.com/css/css_boxmodel.asp

다른 부분에 대한 설명 :

• 내용 -텍스트와 이미지가 나타나는 상자의 내용

• 패딩 -컨텐츠 주변의 영역을 지 웁니다. 패딩은 투명하다

• 테두리 -패딩 및 내용을 둘러싼 테두리

• 여백 -테두리 외부의 영역을 지 웁니다. 여백은 투명하다

실제 예 (값을 변경하여 재생) : https://www.w3schools.com/css/tryit.asp?filename=trycss_boxmodel

여기에 방법을 보여줍니다 일부 HTML입니다 padding및 margin클릭 가능성에 영향을 미칠 및 배경 채우기는. 객체는 패딩에 대한 클릭을 수신하지만 객체 여백의 영역을 클릭하면 상위로 이동합니다.

$(".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>

여백에 대한 것은 요소의 너비에 대해 걱정할 필요가 없다는 것입니다.

무언가를 줄 때와 마찬가지로 ' 맞춤 ' 을 유지하고 주변의 다른 요소를 방해하지 않도록 {padding: 10px;}요소의 너비를 20px 로 줄여야 합니다.

그래서 나는 일반적으로 패딩을 사용하여 모든 ' packed' 를 얻은 다음 약간의 조정을 위해 여백을 사용합니다.

알아야 할 또 다른 사항은 다른 브라우저에서 패딩이 더 일관되며 IE는 음수 마진을 잘 처리하지 못한다는 것입니다.

여백은 요소 주변 (영역 바깥 쪽)의 영역을 지우지 만 패딩은 요소의 내용 (테두리 내부) 영역을 지 웁니다.

요소가 외부 여백에 대해 알지 못하므로 동적 웹 컨트롤을 개발하는 경우 가능하면 패딩 대 여백을 사용하는 것이 좋습니다.

때로는 여백을 사용해야합니다.

이 사이의 차이점을 알고 좋은 margin과를 padding. 몇 가지 차이점이 있습니다.

• 여백은 요소의 외부 공간 이며 패딩은 요소의 내부 공간 입니다.

• 여백은 요소의 테두리 외부 공간이며 패딩은 요소의 테두리 내부 공간입니다.

• 여백은 auto : 값을 허용 margin: auto하지만 패딩을 자동으로 설정할 수 없습니다.

• 여백은 임의의 숫자로 설정할 수 있지만 패딩은 음수가 아니어야합니다.

• 요소의 스타일을 지정할 때 여백은 영향을받지 않고 (예 : 배경색) 영향을받습니다.

한 가지주의 할 점은 자동 축소 여백이 성 가시고 (요소에 배경색을 사용하지 않는 경우) 패딩을 사용하는 것이 더 쉬운 것입니다.

고급 마진 대 패딩 설명

padding요소에 내용을 배치하는 데 사용 하는 것은 부적절합니다 . 당신은 해야한다 활용할 margin온 자식 요소 대신. Internet Explorer와 같은 오래된 브라우저 margin는 Internet Explorer 4 에서 완벽하게 작동하는 경우를 제외하고는 상자 모델을 잘못 해석했습니다 .

사용하기 padding 에 적합한 경우 두 가지 예외 가 있습니다.

1. 입력 요소와 같은 하위 요소를 포함 할 수없는 인라인 요소에 적용됩니다 .

2. 당신은 공급 업체가 * 기침 * 모질라는 * 기침 * 당신이 것을 수정하고 (당신이 W3C와 WHATWG 편집자들과 정기적 교류를 유지하는 정도) 확신을 거부 높은 기타 브라우저 버그를 보상하는 있어야 작동하는 솔루션이 솔루션을 보상하는 버그 이외의 다른 스타일에는 영향을 미치지 않습니다.

너비가 100 % 인 경우 padding: 50px;효과적으로 얻을 수 width: calc(100% + 100px);있습니다. 이후 margin되어 있지 받는 추가 width예기치 않은 레이아웃 문제 원인 당신이 사용하지 않을 경우 margin에 child elements대신 padding요소에 직접.

당신이있어 경우에 따라서 하지 않는 두 가지 중 하나를 수행 하지 요소에 만에 패딩을 추가 당신이받을거야 보장하기 위해 직접 아이 / 어린이 요소 (들)의 예상 에서 동작 하는 모든 브라우저를.

먼저 차이점과 각 책임이 무엇인지 살펴 보겠습니다.

1) 여백

CSS 여백 속성은 요소 주위에 공간을 생성하는 데 사용됩니다.
여백 속성은 테두리 외부의 공백 크기를 설정합니다. CSS를 사용하면 여백을 완전히 제어 할 수 있습니다.
요소의 각 측면 (위쪽, 오른쪽, 아래쪽 및 왼쪽)에 대한 여백을 설정하기위한 CSS 속성이 있습니다.

2) 패딩

CSS 패딩 속성은 내용 주위에 공간을 생성하는 데 사용됩니다.
안쪽 여백은 요소의 내용 (테두리 내부) 주변 영역을 지 웁니다.
CSS를 사용하면 패딩을 완전히 제어 할 수 있습니다. 요소의 각 측면에 패딩을 설정하기위한 CSS 속성이 있습니다 (위쪽, 오른쪽, 아래쪽 및 왼쪽).

따라서 여백 은 요소 주위에 공간이며, 패딩 은 요소의 일부인 내용 주위에 공간입니다.

코드 맨 의이 이미지는 여백과 테두리가 어떻게 서로 바뀌는 지, 테두리 상자와 내용 상자가 어떻게 다른지 보여줍니다.

또한 각 섹션을 아래와 같이 정의합니다.

• 내용 -텍스트, 이미지 또는 다른 요소와 같은 실제 내용이있는 상자의 내용 영역을 정의합니다.
• 패딩 -기본 컨텐츠를 포함 상자에서 지 웁니다.
  
• 테두리 -내용과 패딩을 모두 둘러 쌉니다.
• 여백 -이 영역은 다른 요소와 분리되는 투명한 공간을 정의합니다.

나는 항상이 원칙을 사용합니다.

이것은 Firefox에서 요소 검사 기능의 박스 모델입니다. 양파처럼 작동합니다.

• 콘텐츠가 중간에 있습니다.
• 패딩은 내용과 태그 내부의 가장자리 사이의 공간입니다.
• 국경과 그 사양
• 여백은 태그 주위의 공간입니다.

따라서 여백이 클수록 컨텐츠가 포함 된 상자 주위에 더 많은 공간이 생깁니다.

패딩이 클수록 컨텐츠와 그 안에있는 상자 사이의 공간이 늘어납니다.

상자가 특정 값으로 설정된 경우 상자 크기를 늘리거나 줄이지 않습니다.

여유

여백은 일반적으로 요소 자체와 서라운드 사이에 공간을 만드는 데 사용됩니다.

예를 들어 탐색 표시 줄을 만들 때 화면 가장자리에 붙어 흰색 간격이 생기지 않도록 사용합니다.

심

나는 일반적으로 테두리 안에 요소가 <div>있거나 비슷한 것을 사용할 때 사용 하고 크기를 줄이려고하지만 다른 요소 사이의 거리 또는 여백을 유지하려고합니다.

간단히 말해서 상황에 따라 다릅니다. 그것은 당신이하려는 일에 달려 있습니다.

여백은 상자 외부에 있고 패딩은 상자 안에 있습니다.