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

질문자 :Alex Angas

폐쇄 . 이 질문은 의견 기반 입니다. 현재 답변을 받고 있지 않습니다.

---

이 질문을 개선하고 싶으십니까? 이 게시물 을 편집하여 사실과 인용으로 답변할 수 있도록 질문을 업데이트하십시오.

폐쇄 2 년 전 .

이 질문 개선

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

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

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

패딩이 1em 인 두 요소를 서로 위에 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>

Community Wiki

여백은 블록 요소의 외부에 있고 패딩은 내부에 있습니다.

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

John Boker

예제, 다이어그램, 심지어 '직접 사용해 보기' 보기를 통해 이것을 설명하는 가장 좋은 방법은 여기 입니다.

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

명심해야 할 한 가지는 표준 호환 브라우저( IE quirks는 예외 )는 콘텐츠 부분만 주어진 너비로 렌더링하므로 레이아웃 계산에서 이를 추적한다는 것입니다. 또한 테두리 상자는 Bootstrap 3가 지원하는 복귀를 보고 있습니다.

Scott

귀하의 질문에 대한 더 많은 기술적인 설명이 있지만 여백과 패딩에 대해 생각 하는 방법을 원한다면 이 비유가 도움이 될 것입니다.

블록 요소를 벽에 걸려 있는 액자로 상상해 보십시오.

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

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

---

¹ box-sizing 속성으로 이 동작을 변경할 수 있습니다.

stvnrynlds

마진 대 패딩 :

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

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

Margin Vs Padding - CSS 속성 에서 추출한 아래 이미지를 참조하십시오.

Touhid Rahman

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

다른 부분에 대한 설명:

• 내용 - 텍스트와 이미지가 표시되는 상자의 내용

• 패딩 - 콘텐츠 주변 영역을 지웁니다. 패딩이 투명하다

• 테두리 - 패딩과 콘텐츠를 둘러싸는 테두리

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

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

Pulkit Anchalia

margin 과 padding 의 차이점을 아는 것이 좋습니다. 다음은 몇 가지 차이점입니다.

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

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

• Margin은 auto: margin: auto 값을 허용하지만 패딩을 auto로 설정할 수는 없습니다.

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

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

MAChitgarha

padding 과 margin 이 클릭 가능성과 배경 채우기에 미치는 영향을 보여주는 HTML입니다. 개체는 패딩에 대한 클릭을 받지만 개체의 여백 영역을 클릭하면 부모로 이동합니다.

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

Frank Schwieterman

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

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

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

알아야 할 또 다른 사항은 패딩이 다른 브라우저에서 더 일관되고 IE가 음수 여백을 잘 처리하지 않는다는 것입니다.

pixeltocode

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

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

여백을 사용해야 하는 경우가 있습니다.

Mohammad Golahi

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

alex

고급 마진 대 패딩 설명

요소의 콘텐츠 공간에 padding 을 사용하는 것은 부적절합니다. 대신 자식 요소 에서 margin 을 사용해야 합니다. Internet Explorer와 같은 이전 브라우저는 Internet Explorer 4 에서 완벽하게 작동 margin 을 사용하는 경우를 제외하고 상자 모델을 잘못 해석했습니다.

padding 을 사용하는 것이 적절한 경우 두 가지 예외가 있습니다.

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

2. 공급업체 *기침* Mozilla *기침*이 수정을 거부하고 작동하는 솔루션과 이 솔루션이 있어야 한다고 확신하는(W3C 및 WHATWG 편집자와 정기적으로 교환하는 정도까지) 매우 다양한 브라우저 버그를 보상하고 있습니다. 보상하려는 버그 이외의 다른 스타일에는 영향을 미치지 않습니다.

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

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

John

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

1) 마진

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

2) 패딩

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

따라서 간단히 여백 은 요소 주변의 공간이고 패딩 은 요소의 일부인 콘텐츠 주변 공간입니다.

codemancers의 이 이미지는 margin과 border가 어떻게 합쳐지고 border box와 content-box가 어떻게 다른지를 보여줍니다.

또한 다음과 같이 각 섹션을 정의합니다.

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

Alireza

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

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

• 콘텐츠가 중간에 있습니다.
• 패딩은 콘텐츠와 콘텐츠가 포함된 태그 가장자리 사이의 공간입니다.
• 테두리와 그 사양
• 여백은 태그 주변의 공간입니다.

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

패딩이 클수록 콘텐츠와 콘텐츠가 들어 있는 상자 사이의 공간이 늘어납니다.

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

Bjamse

여유

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

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

심

나는 보통 테두리, <div> 또는 이와 유사한 내부 요소가 있고 크기를 줄이고 싶지만 주변의 다른 요소 사이의 거리 또는 여백을 유지하고 싶을 때 사용합니다.

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

Mostafa Osama

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

saurabhgoyal795

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