CSS에서 마진과 패딩의 차이점은 무엇입니까?

CSS에서 마진과 패딩의 차이점은 무엇입니까?

사이의 차이점은 무엇입니까?margin그리고.padding CSS로? 다음과 같은 경우:

• 두 가지 일
• 직오의margin적합합니다.
• 직오의padding적합합니다.

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

저에게 패딩과 마진의 가장 큰 차이점은 수직 마진이 자동으로 무너진다는 것이고 패딩은 그렇지 않다는 것입니다.

두 개 의 요 소 위 겹 있 가 합 정 니 다 고 다 져 쳐 에 가 로 서 ▁of ▁consider ▁one 니 ▁elements ▁padding 다 합 두 정 가 ▁two▁the 고 다 ▁each1em이 패딩은 요소의 일부로 간주되며 항상 보존됩니다.

그래서 여러분은 첫 번째 요소의 내용, 첫 번째 요소의 내용, 두 번째 요소의 내용, 두 번째 요소의 내용으로 끝납니다.

두 따서두요내결용국은의소라가 될 입니다.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>

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

• 여백을 사용하여 블록 외부의 것과 블록을 분리합니다.
• 내용물을 블록 가장자리에서 멀리 이동하려면 패딩을 사용합니다.

예, 다이어그램, 심지어 '직접 해보기' 보기를 사용하여 설명하는 것을 본 최고의 사례가 여기에 있습니다.

제 생각에 아래 도표는 그 차이를 시각적으로 즉시 이해할 수 있는 것 같습니다.

한 가지 염두에 두어야 할 것은 표준 준수 브라우저(IEquirks는 예외임)는 콘텐츠 부분만 주어진 너비로 렌더링하므로 레이아웃 계산에서 이를 기록하십시오.또한 보더 박스는 부트스트랩 3이 지원함에 따라 다소 회복되고 있습니다.

질문에 대한 기술적인 설명이 더 있지만 마진과 패딩에 대해 생각할 수 있는 방법을 원한다면 이 비유가 도움이 될 수 있습니다.

블록 요소를 벽에 걸려 있는 그림 프레임으로 상상해 보십시오.

• 사진이 내용입니다.
• 매트는 패딩입니다.
• 프레임 몰딩이 테두리입니다.
• 벽이 뷰포트입니다.
• 두 프레임 사이의 공간이 여백입니다.

이러한 점을 고려하여 요소를 벽의 다른 요소와 관련하여 여백을 사용하고 요소 자체의 모양을 조정할 때 패딩을 사용하는 것이 좋습니다.여백은 요소의 크기를 변경하지 않지만 패딩은 요소를¹ 더 크게 만듭니다.

---

¹ 특성을 사용하여 이 동작을 변경할 수 있습니다.

여백 대 패딩:

1. 여백은 요소에서 해당 요소와 페이지의 다른 요소 사이의 거리를 만드는 데 사용됩니다.패딩을 사용하여 요소의 내용과 테두리 사이의 거리를 만듭니다.

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

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

출처: https://www.w3schools.com/css/css_boxmodel.asp

다양한 부분에 대한 설명:

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

• 패딩 - 내용 주위의 영역을 지웁니다.패딩이 투명합니다.

• 테두리 - 패딩과 내용 주위를 도는 테두리입니다.

• 여백 - 테두리 밖의 영역을 지웁니다.마진이 투명합니다.

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

사이의 차이점을 알게 되어 기쁩니다.margin그리고.padding다음은 몇 가지 차이점입니다.

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

• 여백은 요소의 경계 바깥쪽 공간이고 패딩은 요소의 경계 안쪽 공간입니다.

• 에는 auto: 여에백 auto: 값사할수있습다니용을▁▁value의 값을 사용할 수 .margin: auto그러나 패딩을 자동으로 설정할 수는 없습니다.

  팁: 여러분은 그들의 부모님 안의 중심을 (심지어 수직으로) 만들기 위해 그 방법을 사용할 수 있습니다.예를 들어 제 다른 답변을 참조하십시오.

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

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

다음은 방법을 보여주는 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;}'적합'을 유지하고 주변의 다른 요소를 방해하지 않으려면 요소의 폭을 20도 줄여야 합니다.

그래서 저는 일반적으로 모든 것을 얻기 위해 패딩을 사용하는 것으로 시작합니다.'packed그런 다음 사소한 조정에 여백을 사용합니다.

다른 브라우저에서 패딩이 더 일관적이며 IE가 마이너스 마진을 잘 처리하지 않는다는 점에 유의해야 합니다.

여백은 요소 주위의 영역(경계 외부)을 지우지만 패딩은 요소 내용 주위의 영역(경계 내부)을 지웁니다.

이것은 당신의 요소가 그것의 외부 여백에 대해 모른다는 것을 의미하기 때문에, 당신이 동적 웹 컨트롤을 개발하고 있다면, 가능하다면 패딩 대 여백을 사용하는 것을 추천합니다.

때때로 마진을 사용해야 합니다.

한 가지 주의할 점은 자동으로 접히는 여백이 성가신 경우(그리고 요소에 배경색을 사용하지 않는 경우) 패딩을 사용하는 것이 더 쉽습니다.

고급 마진 대 패딩 설명

사용하기에 부적합합니다.padding요소의 내용을 공백으로 지정하려면 사용해야 합니다.margin대신 하위 요소에 있습니다.Internet Explorer와 같은 이전 브라우저는 사용할 때를 제외하고 상자 모델을 잘못 해석했습니다.marginInternet Explorer 4에서 완벽하게 작동합니다.

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

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

2. 귀하는 공급업체 *cough* Mozilla *cough*가 수정을 거부하고 W3C 및 WHATWG 편집자와 정기적으로 교환해야 하는 매우 잡다한 브라우저 버그에 대해 보상하고 있으며, 이 솔루션은 귀하가 보상하는 버그 이외의 다른 어떤 것의 스타일링에도 영향을 미치지 않습니다.

이 100%인인 padding: 50px;효과적으로 얻을 수 있습니다.width: calc(100% + 100px);부터.부터margin에 추가되지 않았습니다.width사용 시 예상치 못한 레이아웃 문제가 발생하지 않습니다.marginchild elements에 padding원소에 직접적으로.

따라서 이 두 가지 작업 중 하나를 수행하지 않을 경우 요소에 패딩을 추가하지 않고 직접 하위/하위 요소에 패딩을 추가하여 모든 브라우저에서 원하는 동작을 수행할 수 있습니다.

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

마진

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

패딩

CSS 패딩 속성은 콘텐츠 주변에 공간을 생성하는 데 사용됩니다.
패딩은 요소의 내용(경계 내) 주변 영역을 지웁니다.
CSS를할 수 .요소의 각 측면(위, 오른쪽, 아래 및 왼쪽)에 패딩을 설정하기 위한 CSS 속성이 있습니다.

따라서 단순히 여백은 요소 주위의 공간인 반면, 패딩은 요소의 일부인 내용 주위의 공간입니다.

코드맨의 이 이미지는 여백과 테두리가 어떻게 결합되는지, 그리고 테두리 상자와 내용 상자가 어떻게 다르게 만드는지 보여줍니다.

또한 각 섹션은 다음과 같이 정의됩니다.

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

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

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

• 당신의 콘텐츠는 중간에 있습니다.
• 패딩은 내용과 내용이 들어 있는 태그 가장자리 사이의 공간입니다.
• 테두리 및 그 사양
• 여백은 태그 주변의 공간입니다.

따라서 여백이 커지면 콘텐츠가 들어 있는 상자 주위에 더 많은 공간이 만들어집니다.

패딩이 크면 내용과 내용이 들어 있는 상자 사이의 공간이 늘어납니다.

상자가 특정 값으로 설정되어 있으면 두 상자 모두 크기를 늘리거나 줄이지 않습니다.

마진

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

예를 들어, 화면 가장자리에 흰색 간격 없이 고정할 수 있도록 탐색 모음을 만들 때 사용합니다.

패딩

안에 가 있을 때 합니다.<div>또는 비슷한 것으로 크기를 줄이고 싶지만 주변의 다른 요소들 사이의 거리나 여백을 유지하고 싶습니다.

간단히 말해서, 상황적인 것입니다. 여러분이 무엇을 하려고 하는지에 따라 다릅니다.

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

언급URL : https://stackoverflow.com/questions/2189452/what-is-the-difference-between-margin-and-padding-in-css