여백과 패딩의 차이?
CSS에서 마진과 패딩의 차이는 정확히 무엇입니까?그것은 정말로 별로 쓸모가 없는 것처럼 보입니다.차이점이 어디에 있는지 (그리고 차이점을 아는 것이 왜 중요한지) 예를 들어 주시겠습니까?
padding과 용과내사공간다니입이 의 입니다.border에, 면에반에.margin국경 밖의 공간입니다.여기 빠른 구글 검색에서 찾은 이미지가 있습니다. 이 아이디어를 보여줍니다.
여기 답변에 누락된 한 가지 핵심 사항은 다음과 같습니다.
위쪽/아래쪽 여백은 접을 수 있습니다.
따라서 요소의 맨 아래에 20px 여백이 있고 다음 요소의 맨 위에 30px 여백이 있으면 두 요소 사이의 여백은 50px가 아니라 30px가 됩니다.왼쪽/오른쪽 여백 또는 패딩에는 적용되지 않습니다.
여백은 요소의 외부에 적용되므로 요소가 다른 요소로부터 얼마나 멀리 떨어져 있는지에 영향을 미칩니다.
패딩은 요소 내부에 적용되므로 요소 내용이 경계에서 얼마나 멀리 떨어져 있는지에 영향을 미칩니다.
또한 여백을 사용하면 요소의 치수에 영향을 미치지 않지만 패딩은 요소의 치수(설정 높이 + 패딩)를 만듭니다. 예를 들어, 5px 패딩이 있는 100x100px div가 있는 경우 div는 실제로 105x105px가 됩니다.
다음 세 가지 사항을 기억하십시오.
- 여백은 컨트롤 주변의 추가 공간입니다.
- 패딩은 컨트롤 내부의 추가 공간입니다.
- 외부 컨트롤의 패딩은 내부 컨트롤의 여백입니다.
데모 이미지:(빨간색 상자는 욕망 제어)
가장 간단한 정의는 다음과 같습니다. 패딩은 컨테이너 요소의 경계 안쪽에 지정된 공간이고 여백은 외부에 지정됩니다.용기가 아닌 요소의 경우 패딩이 그다지 의미가 없을 수도 있지만 여백이 배치에 도움이 될 것입니다.
여백은 테두리 밖의 공간인 반면, 패딩은 테두리 안의 공간입니다.
패딩
패딩은 요소 내용과 해당 경계 사이의 공간(경계가 있는 경우)을 정의하는 CSS 속성입니다.요소 주위에 테두리가 있는 경우 패딩은 해당 테두리에서 해당 테두리에 나타나는 요소 내용에 대한 공간을 제공합니다.요소 주위에 테두리가 없는 경우 공백을 제공할 테두리가 없기 때문에 패딩을 추가해도 해당 요소에는 전혀 영향을 주지 않습니다.
마진
여백은 요소 외부에서 다음 외부 요소까지의 공간을 정의하는 CSS 속성입니다.
여백은 경계가 있거나 없는 요소에 영향을 줍니다.요소에 테두리가 있는 경우 여백은 이 테두리에서 다음 외부 요소까지의 공간을 정의합니다.요소에 테두리가 없는 경우 여백은 요소 내용에서 다음 외부 요소까지의 공간을 정의합니다.
패딩과 여백의 차이
여백과 패딩의 차이점은 패딩이 내부 공간을 다루는 반면 여백은 다음 외부 요소로 가는 외부 공간을 다룬다는 것입니다.
여백과 패딩 사이의 주요 차이점 중 하나는 클릭 가능성과 호버 감지라는 답변에서 언급되지 않았습니다.
패딩을 늘리면 요소의 유효 크기가 증가합니다.가끔 눈에 띄게 크게 만들고 싶지 않은 작은 아이콘이 있지만 사용자는 여전히 해당 아이콘과 상호 작용해야 합니다.아이콘의 패딩을 늘려 클릭 및 마우스 커서를 이동할 수 있도록 합니다.아이콘의 여백을 늘리면 동일한 효과가 나타나지 않습니다.
이 주제에 대한 다른 질문에 대한 대답은 예를 들어 설명합니다.
사이의 차이점에 대해 아는 것은 좋습니다.margin그리고.padding내가 아는 바로는:
- 여백은 요소의 외부 공간이고 패딩은 요소의 내부 공간입니다.즉, 여백은 요소의 경계 바깥쪽 공간이고 패딩은 요소의 경계 안쪽 공간입니다.
- 설정할 수 있습니다.
auto마진에 대한 가치하지만, 패딩은 허용되지 않습니다.이거 보세요.
참고: 사용margin: auto블록 요소를 부모 내부의 중앙에 수평으로 배치합니다.또한 여백을 자동으로 설정하여 Flexbox 내부의 요소를 수직, 수평 또는 둘 다의 중심에 배치할 수 있습니다.이거 보세요. - 여백은 임의의 부동 소수일 수 있지만 패딩은 음수일 수 없습니다.
- 요소에 스타일을 지정하면 여백이 아닌 패딩도 스타일이 지정됩니다.여백은 상위 요소의 스타일을 가져옵니다.를 들어,▁the때를 때,
background-color검은색에 대한 속성, 내부 공간(즉, 패딩)은 검은색이지만 외부 공간(즉, 여백)은 아닙니다.
여백 = 경계에서 바깥쪽으로 요소를 둘러싼 공간입니다.
패딩 = 텍스트에서 테두리까지 요소 주위의 공간을 지정합니다.
다음을 참조하십시오. http://jsfiddle.net/robx/GaMpq/
여백은 상자 외부의 공간이고, 패딩은 상자 내부의 공간입니다.흰색 필은 차이가 잘 안 보이지만, 컬러 필은 잘 보입니다.
마진과 패딩은 둘다 패딩의 종류야 정말..하나(마진)는 요소 경계 외부로 이동하여 다른 요소와 거리를 두고 다른 하나(패딩)는 요소 내용 외부로 이동하여 내용을 요소 경계에서 거리를 둡니다.
패딩을 사용하면 개발자가 텍스트와 텍스트를 둘러싸는 요소 사이의 공간을 유지할 수 있습니다.여백은 요소가 상위 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>
자체 설명 이미지
L - Left, R- Right and T - Top, B - Bottom
내용과 테두리 사이에서 패딩이 계산됩니다.여백은 테두리 
밖에서 계산됩니다.
여백은 CSS에서 경계 바깥쪽의 요소 주위에 공간을 만드는 데 사용되는 속성입니다.프로그래머는 위쪽, 오른쪽, 아래쪽, 왼쪽의 여백을 설정할 수 있습니다.즉, 마진-톱, 마진-우측, 마진-하단 및 마진-좌측을 사용하여 이러한 값을 설정할 수 있습니다.
여백 값은 다음과 같은 유형일 수 있습니다.
먼저 자동을 사용하면 브라우저에서 마진을 계산할 수 있습니다.또한 길이는 px, pt 또는 cm 단위의 여백을 나타내며, %는 포함 요소의 너비에 상대적인 백분율로 여백을 설명하는 데 도움이 됩니다.마지막으로 상속은 마진이 상위 요소에서 상속되어야 함을 나타냅니다.
패딩은 CSS에서 테두리 안의 요소 주위에 공간을 만드는 데 도움이 되는 속성입니다.프로그래머는 위쪽, 오른쪽, 아래쪽, 왼쪽의 패딩을 설정할 수 있습니다.즉, 패딩-톱, 패딩-오른쪽, 패딩-하단 및 패딩-왼쪽을 사용하여 이러한 값을 설정할 수 있습니다.
패딩 값은 다음과 같은 유형일 수 있습니다.
길이는 px, pt 또는 cm 단위로 패딩을 설명하고 %는 포함 요소의 너비에 상대적인 비율로 패딩을 나타냅니다.마지막으로 상속은 패딩이 상위 요소에서 상속되어야 한다고 설명합니다.
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에서 웹 페이지를 스타일링할 수 있는 두 가지 속성입니다.이러한 속성에는 음수 값을 할당할 수 없습니다.여백과 패딩의 주요 차이점은 여백이 테두리 안의 요소 주위에 공간을 만드는 데 도움이 되는 반면, 패딩은 테두리 안의 요소 주위에 공간을 만드는 데 도움이 된다는 것입니다.
가로와 세로로 블록 디브에 배경색을 넣어보세요.패딩은 요소의 크기를 증가시키는 반면 여백은 문서의 흐름 내에서 요소를 이동시키는 것을 볼 수 있습니다.
여백은 특히 요소를 이동하기 위한 것입니다.
패딩은 웹 페이지에서 가장 가까운 구성 요소 사이의 공간이고 여백은 웹 페이지의 여백입니다.
마진과 패딩에 대한 제 이해는 첨부된 이미지에
있는 구글의 개발자 도구에서 나온 것입니다.
단순 단어에서 여백은 요소 주위의 공간이고 패딩은 요소와 요소 내부의 내용 사이의 공간을 의미합니다.이 두 가지 모두 간격을 만드는 데 사용되지만 다른 방식으로 사용됩니다.
여백을 사용하여 간격 만들기:
갭 마진을 생성할 때 인접 요소를 밀어냅니다.
패딩을 사용하여 간격 만들기:
간격을 만들기 위해 패딩을 사용하면 요소의 크기가 커지거나 내부 내용이 축소됩니다.
차이점을 아는 것이 왜 중요합니까?
둘 중 하나를 언제 사용하고 적절하게 사용해야 하는지 알 수 있도록 차이점을 아는 것이 중요합니다.
여백은 요소가 위로 또는 아래로 이동할지, 왼쪽 또는 오른쪽으로 이동할지를 지정하는 반면, 여백은 요소가 컨테이너 내부에서 어떻게 보이고 배치되는지를 지정하기 때문에 여백과 패딩은 웹 사이트 레이아웃을 설계할 때 유용합니다.
당신은 CSS에서 패딩과 마진이 어떻게 작동하는지 볼 수 있는 이 링크를 확인할 수 있습니다. https://raw.githack.com/sushantbramhacharya/WebTechnology_LEC/main/margin/index.html
한 가지 중요한 차이점이 있습니다.
여백 - 요소의 외부에 있습니다. 즉, 요소가 시작된 후 공백 이동을 적용합니다.패딩 - 내부에 있으며, 다른 하나는 요소가 시작되기 전에 공백을 적용합니다.
여백은 요소 외부에 적용되므로 요소가 다른 요소로부터 얼마나 멀리 떨어져 있는지에 영향을 미칩니다.
패딩은 요소 내부에 적용되므로 요소 내용이 경계에서 얼마나 멀리 떨어져 있는지에 영향을 미칩니다.
또한 여백을 사용하면 요소의 치수에 영향을 미치지 않지만 패딩은 요소의 치수(설정 높이 + 패딩)를 만듭니다. 예를 들어, 5px 패딩이 있는 100x100px div가 있는 경우 div는 실제로 105x105px가 됩니다.
기본적으로 패딩과 마진의 차이는 배경에 따라 달라집니다.패딩은 내용 사이의 공간을 결정하고 여백은 요소의 바깥쪽 가장자리를 결정합니다!
제가 방금 알아차린 한 가지는 위의 답변 중 언급된 것이 없습니다.빈 내부 html 콘텐츠로 초기화된 동적으로 생성된 DOM 요소가 있는 경우, 이 빈 요소가 콘텐츠가 생성되지 않는 한 공간을 차지하지 않으려면 패딩 대신 여백을 사용하는 것이 좋습니다.
패딩은 콘텐츠와 테두리 사이의 공간입니다.여백은 테두리와 다른 요소 사이의 공간입니다.
언급URL : https://stackoverflow.com/questions/5958699/difference-between-margin-and-padding
'programing' 카테고리의 다른 글
| PowerBi에서 대용량 DB(sqlite/mariadb)로 작업 (0) | 2023.09.01 |
|---|---|
| asp.net 의 모바일 장치 탐지 (0) | 2023.09.01 |
| 오류: MySQL에서 마스터 슬레이브 복제를 수행하는 동안 "마스터 정보 구조를 초기화할 수 없습니다." (0) | 2023.09.01 |
| INSERT /*+APPEND*/가 사용되는 이유는 무엇입니까? (0) | 2023.09.01 |
| 업데이트를 위해 Galera 노드를 분리하는 방법은 무엇입니까? (0) | 2023.08.27 |