여백과 패딩의 차이는 무엇입니까?

371

CSS에서 여백 과 패딩 의 차이점은 정확히 무엇입니까 ? 실제로 많은 목적을 달성하지 못하는 것 같습니다. 차이점이 어디에 있는지 (그리고 차이점을 아는 것이 왜 중요한지) 예를 들어 주시겠습니까?

css

14

stackoverflow.com/questions/2189452/… stackoverflow.com/questions/3060456/… stackoverflow.com/questions/4619899/… 검색에서 처음 세 개의 링크 padding vs margin. 검색 창에 화살표를 추가하고 녹색을 만들어야한다고 생각합니다.

— 라임

2

차이를 이해하는 데 도움이 될 수 있습니다. digizol.com/2006/12/margin-vs-padding-css-properties.html

— lkamal

2

또한 Internet Explorer는 여백 / 테두리 / 패딩 너비를 거의 모든 다른 브라우저와 다르게 (기본 비 쿼크 모드에서) 합산합니다.

— David R Tribble 15

1

여백이 작동하지 않으면 패딩을 시도하십시오

— JoelFan

410

padding내용과 사이의 공간 border인 반면 margin테두리 외부의 공간입니다. 빠른 Google 검색에서 찾은 이미지는이 아이디어를 보여줍니다.

여기에 이미지 설명을 입력하십시오

— abcd
소스

3

또한 이러한 사이트에서 정의를 확인하십시오. 그러나 그래픽은 완벽한 그림입니다. w3schools.com/css/css_margin.asp w3schools.com/css/css_padding.asp

— Suroot

@maclunian : 위의 @Suroot 링크 외에이 사이트 w3schools.com/css/css_boxmodel.asp 도 확인하십시오 .

— abcd

그래도 이것이 설정된 너비와 높이와 어떻게 관련이 있습니까? 이 모든 것이 어디에서 측정됩니까?

— Nyerguds

128

여기에 대한 답변에서 빠진 한 가지 핵심 사항은 다음과 같습니다.

위 / 아래 여백은 접을 수 있습니다.

따라서 요소 하단에 20px 여백이 있고 다음 요소 상단에 30px 여백이 있으면 두 요소 사이의 여백은 50px가 아닌 30px입니다. 왼쪽 / 오른쪽 여백 또는 패딩에는 적용되지 않습니다.

— 나단
소스

6

수직 여백이 붕괴되는 매우 특정한 상황이 있습니다. 단 두 개의 수직 여백은 그렇게하지 않습니다. 어떤 단지 (당신이 아니라면 그것은 더욱 혼란하게 아주 박스 모델에 대해 잘 알고).

— BoltClock

76

여백은 요소 외부 에 적용 되므로 요소가 다른 요소와 얼마나 떨어져 있는지에 영향을줍니다.

패딩은 요소 내부 에 적용 되므로 요소의 내용이 테두리에서 얼마나 멀리 떨어져 있는지에 영향을줍니다.

또한 여백을 사용하면 요소의 크기에 영향을 미치지 않지만 패딩은 요소 크기를 설정합니다 (높이 + 패딩 설정). 예를 들어 5px 패딩이있는 100x100px div가있는 경우 div는 실제로 105x105px입니다

— 로스트 린
소스

15

패딩이 모든면에 적용된다고 생각하므로 요소는 110x110px

— 2013Asker

Ehm, afaik 패딩은 너비가 이외의 것으로 설정된 경우 요소의 너비를 변경하지 않습니다 auto. 너비가 auto인 경우 추가 패딩은 그에 따라 패딩 된 요소의 너비를 증가시킵니다 (@ 2013Asker가 언급 한 것처럼 양쪽에서)

— Flater

1

div의 너비가 여전히 100px (상자 크기 조정이 content-box로 설정되어 있다고 가정)하기 때문에 div가 110x110px라고 말하는 것은 약간 오해라고 생각합니다.

— wmock

44

다음 3 가지 사항을 기억하십시오.

여백은 컨트롤 주위 의 추가 공간 입니다.
패딩은 컨트롤 내부 의 추가 공간 입니다.
외부 컨트롤 의 패딩은 내부 컨트롤의 여백입니다 .

데모 이미지 :( 빨간색 상자는 욕망 제어)

— sms247
소스

2

차이점을 아는 것이 왜 중요한지에 대한 대답은 아닙니다.

— GreenAsJade

38

가장 간단한 방어는; 패딩은 컨테이너 요소의 테두리 내부에 제공된 공간이며 여백은 외부에 제공됩니다. 컨테이너가 아닌 요소의 경우 패딩은 그다지 의미가 없지만 마진은 방어 적으로 정렬하는 데 도움이됩니다.

— 바람 Chimez
소스

30

여백은 테두리 내부 공간 이며 여백은 테두리 외부 공간 입니다.

— 압둘 가포 어
소스

25

심

패딩은 요소 내용과 테두리 사이의 간격을 정의하는 CSS 속성입니다 (테두리가있는 경우). 요소 주위에 테두리가있는 경우 패딩은 해당 테두리에서 해당 테두리에 나타나는 요소 내용까지의 공간을 제공합니다. 요소 주위에 테두리가없는 경우 여백을 추가해도 해당 요소에 전혀 영향을 미치지 않습니다. 여백을 두는 테두리가 없기 때문입니다.

여유

여백은 요소 외부의 공간을 다음 외부 요소로 정의하는 CSS 속성입니다.

여백은 테두리가 있거나없는 요소에 영향을줍니다. 요소에 테두리가있는 경우 margin은이 테두리에서 다음 외부 요소까지의 공간을 정의합니다. 요소에 테두리가없는 경우 margin은 요소 내용에서 다음 외부 요소까지의 공간을 정의합니다.

패딩과 여백의 차이점

따라서 여백과 패딩의 차이는 안쪽 여백을 처리하는 동안 여백은 다음 외부 요소에 대한 바깥 공간을 처리한다는 것입니다.

— 라 케시 싱
소스

1

테두리가없는 요소는 무엇입니까?

— Sarim Javaid Khan

10

여백과 패딩의 주요 차이점 중 하나는 클릭 가능성 및 호버 감지에 대한 답변에서 언급되지 않았습니다.

패딩을 늘리면 요소의 유효 크기가 증가합니다. 때로는 작은 아이콘이있어 눈에 띄게 크게 만들고 싶지 않지만 사용자는 여전히 해당 아이콘과 상호 작용해야합니다. 클릭 및 호버링을 위해 아이콘의 패딩을 늘리기 위해 아이콘의 패딩을 늘립니다. 아이콘의 여백을 늘리면 같은 효과가 없습니다.

이 주제에 관한 다른 질문에 대한 대답 이 그 예입니다.

— 폴
소스

상위 답변의 대부분은 요소의 안쪽에있는 패딩과 바깥쪽에있는 여백을 의미하며, 이미 큰 클릭 영역에 기여하는 패딩을 의미합니다. 완전히 투명한 상자를 다룰 때 그렇게 분명하지는 않습니다.

— BoltClock

9

margin = 경계에서 바깥쪽으로 요소 주위 (외부) 공간.

패딩 = 텍스트에서 테두리까지 요소 주변 (안쪽)의 공간.

여기를 참조하십시오 : http://jsfiddle.net/robx/GaMpq/

— Robx
소스

9

이 사이의 차이점에 대해 알고하는 것이 좋다 margin와 padding. 내가 알듯이 :

여백은 요소 의 외부 공간 이며 패딩은 요소의 내부 공간 입니다. 즉, 여백은 요소 테두리 외부의 공간이고 패딩은 테두리 내부 공간입니다.
auto값을 여백으로 설정할 수 있습니다 . 그러나 패딩은 허용되지 않습니다. 이것을보십시오 .
참고 :margin: auto 블록 요소를 부모 내부의 가로 가운데에 배치하는 데 사용 합니다. 또한 여백을 자동으로 설정하여 flexbox 내부의 요소를 세로 또는 가로 또는 둘 다 가운데에 배치 할 수 있습니다. 이것을보십시오 .
여백은 플로트 수일 수 있지만 패딩은 음수가 아니어야합니다.
요소의 스타일을 지정할 때 패딩도 스타일이 지정됩니다. 그러나 여백은 아닙니다. 여백은 부모 요소의 스타일을 얻습니다. 예를 들어, background-color속성을 검은 색으로 설정하면 내부 공간 (예 : 패딩)은 검은 색이지만 외부 공간 (예 : 여백)은 아닙니다.

— MAChitgarha
소스

4

여백 은 상자 외부의 공간입니다. 패딩 은 상자 내부의 공간입니다. 흰색 채우기로 차이점을 확인하기는 어렵지만 색상 채우기로 잘 볼 수 있습니다.

— 어니스트 프리드먼-힐
소스

2

여백과 패딩은 실제로 패딩의 유형입니다. ... 한 (여백)은 다른 요소와 거리를두기 위해 요소 테두리 바깥쪽으로 가고 다른 (패딩)은 요소 경계에서 콘텐츠와 거리를두기 위해 요소 콘텐츠 바깥쪽으로갑니다.

— 청키 보이
소스

2

패딩을 사용하면 개발자가 텍스트와 둘러싸는 요소 사이의 공간을 유지할 수 있습니다. 여백은 요소가 상위 DOM의 다른 요소와 유지 보수하는 공간입니다.

예를보십시오 :

<head>
<meta http-equiv="Content-Type" content="text/html; charset=UT-8">
    <title>Pseudo Elements</title>
    <style type="text/css">
        body{font-family:Arial; font-size:16px; background-color:#f8e6ae; color:#888;}
        .page
        {
            background-color: #fff;
            padding: 10px 30px 50px 50px;
            margin:30px 100px 30px 300px;
        }
    </style>
</head>
<body>
    <div class="page">
        Notice the distance between the top and this text. Then compare it with the distance between the bottom border and the this text. 
    </div>
</body>

— 라자 트
소스

1

여백 은 테두리 외부의 요소 주위에 공백을 만드는 데 사용되는 CSS의 속성입니다. 프로그래머는 위쪽, 오른쪽, 아래쪽 및 왼쪽의 여백을 설정할 수 있습니다. 즉, 그는 마진-위, 마진-오른쪽, 마진-하단 및 마진-왼쪽을 사용하여 해당 값을 설정할 수 있습니다.

여백 값은 다음과 같은 유형이 될 수 있습니다.

먼저, auto는 브라우저가 마진을 계산할 수있게합니다. 또한 길이는 px, pt 또는 cm의 여백을 나타내며 %는 여백을 포함하는 요소의 너비에 대한 백분율로 여백을 설명하는 데 도움이됩니다. 마지막으로 inherit은 마진이 부모 요소에서 상속되어야 함을 나타냅니다.

패딩 은 테두리 내의 요소 주위에 공간을 만드는 데 도움이되는 CSS의 속성입니다. 프로그래머는 상하 좌우 패딩을 설정할 수 있습니다. 즉, 그는 padding-top, padding-right, padding-bottom 및 padding-left를 사용하여 해당 값을 설정할 수 있습니다.

패딩 값은 다음과 같은 유형이 될 수 있습니다.

길이는 패딩 (px, pt 또는 cm)을 나타내며, %는 패딩을 포함하는 요소의 너비에 대한 백분율로 나타냅니다. 마지막으로, inherit은 패딩이 부모 요소에서 상속되어야한다고 설명합니다.

 div.special {
          width:200px; 
          border-style: solid; 
          border-width:thin; 
          border-color:#000;
          margin:30px 20px 10px 25px;
}     
div.special2 {
          width:200px;
          border-style: solid;
          border-width:thin;
          border-color:#000;
          padding:30px 20px 10px 25px;
}

<div class="special">
             Hello its margin test 
</div>
<div class="special2">
            Hello its padding test
</div>

스 니펫 확장

여백과 패딩의 차이점

여백 은 정의 된 테두리 외부의 요소 주위에 공간을 만드는 데 사용되는 CSS 속성이며, 패딩 은 정의 된 테두리 내부의 요소 주위에 공간을 만드는 데 사용되는 CSS 속성입니다. 따라서 여백과 패딩의 주요 차이점을 설명합니다.

값 또한 여백 값은 자동, 길이, % 또는 상속 일 수 있으며 패딩 값은 길이, % 또는 상속 유형일 수 있습니다. 따라서 이것은 여백과 패딩의 또 다른 차이점입니다.

간단히 말해서 여백과 패딩 은 웹 페이지를 스타일링 할 수있는 CSS의 두 가지 속성입니다. 해당 속성에 음수 값을 할당 할 수 없습니다. 여백과 패딩의 주요 차이점은 여백은 테두리 외부의 요소 주위에 공간을 만드는 데 도움이되고 패딩은 테두리 내부의 요소 주위에 공간을 만드는 데 도움이된다는 것입니다.

— 열렬한 프로그래머
소스

0

너비와 높이가있는 블록 div에 배경색을 넣으십시오. 여백은 요소의 크기를 늘리는 반면 여백은 문서의 흐름 내에서 요소를 이동시킵니다.

여백은 특히 요소를 이동시키기위한 것입니다.

— 헨리
소스

0

패딩은 웹 페이지에서 가장 가까운 구성 요소 사이의 간격이며 여백은 웹 페이지의 여백과의 간격입니다.

— Prabeesh rk
소스

0

방금 주목 한 것은 있지만 위의 답변 중 언급 된 것은 없습니다. 빈 내부 HTML 내용으로 초기화 된 동적으로 생성 된 DOM 요소가있는 경우이 빈 요소가 내용을 제외한 공간을 차지하지 않으려면 패딩 대신 여백을 사용하는 것이 좋습니다.

— 크레스 웨이
소스

-1

한 가지 중요한 차이점이 있습니다.

여백은 요소 외부에 있습니다. 즉, 요소가 시작된 후 "공백"을 적용합니다. 패딩은 내부에 있고 다른 하나는 요소가 시작하기 전에 "공백"을 적용합니다.

— Ars
소스

-1

여백은 요소 외부에 적용되므로 요소가 다른 요소와 얼마나 떨어져 있는지에 영향을줍니다.

패딩은 요소 내부에 적용되므로 요소의 내용이 테두리에서 얼마나 멀리 떨어져 있는지에 영향을줍니다.

또한 여백을 사용하면 요소의 크기에 영향을 미치지 않지만 패딩은 요소 크기를 설정합니다 (높이 + 패딩 설정). 예를 들어 5px 패딩이있는 100x100px div가있는 경우 div는 실제로 105x105px입니다

— 시얄 카프리
소스

이 답변이 이미 제공된 것을 보셨습니까? -추가되고 적절한 강조와 함께?

— JerryOL

-1

기본적으로 패딩과 여백의 차이는 배경으로 나타납니다. 여백은 내용 사이의 간격을 결정하고 여백은 요소의 바깥 쪽 가장자리를 결정합니다!

— 빈 닷 하
소스

-7

패딩은 내용과 테두리 사이의 공간입니다. 여백 사이의 공간 어디로 경계와 다른 요소입니다.

— 알리 마문 리즈 완
소스

1

여백은 그다지 간단하지 않으며, 이것은 수십 개의 해답이 아직 말하지 않은 것을 말하지 않습니다.

— Quentin

2

이전 답변을 반복했습니다.

— Johnroe Paulo Cañamaque