여백과 패딩의 차이는 무엇입니까?
CSS에서 여백 과 패딩 의 차이점은 정확히 무엇입니까 ? 실제로 많은 목적을 달성하지 못하는 것 같습니다. 차이점이 어디에 있는지 (그리고 차이점을 아는 것이 왜 중요한지) 예를 들어 주시겠습니까?
padding내용과 사이의 공간 border인 반면 margin테두리 외부의 공간입니다. 빠른 Google 검색에서 찾은 이미지는이 아이디어를 보여줍니다.
여기에 대한 답변에서 빠진 한 가지 핵심 사항 :
위 / 아래 여백은 접을 수 있습니다.
따라서 요소 하단에 20px 여백이 있고 다음 요소 상단에 30px 여백이 있으면 두 요소 사이의 여백은 50px가 아닌 30px입니다. 왼쪽 / 오른쪽 여백 또는 패딩에는 적용되지 않습니다.
여백은 요소 외부 에 적용 되므로 요소가 다른 요소와 얼마나 떨어져 있는지에 영향을줍니다.
안쪽 여백은 요소 내부 에 적용 되므로 요소의 내용이 테두리에서 얼마나 떨어져 있는지에 영향을줍니다.
또한 여백을 사용하면 요소의 크기에 영향을 미치지 않지만 패딩은 요소 크기를 설정합니다 (높이 + 패딩 설정). 예를 들어 5px 패딩이있는 100x100px div가있는 경우 div는 실제로 105x105px입니다
다음 3 가지 사항을 기억하십시오.
- 여백은 컨트롤 주위 의 추가 공간 입니다.
- 패딩은 컨트롤 내부 의 추가 공간 입니다.
- 외부 컨트롤 의 패딩은 내부 컨트롤의 여백입니다 .
데모 이미지 :( 빨간색 상자는 욕망 제어) 
가장 간단한 방어는; 패딩은 컨테이너 요소의 테두리 내부에 제공된 공간이며 여백은 외부에 제공됩니다. 컨테이너가 아닌 요소의 경우 패딩은 그다지 의미가 없지만 마진은 방어 적으로 정렬하는 데 도움이됩니다.
여백은 테두리 내부 공간 이며 여백은 테두리 외부 공간 입니다.
심
패딩은 요소 내용과 테두리 사이의 간격을 정의하는 CSS 속성입니다 (테두리가있는 경우). 요소 주위에 테두리가 있으면 패딩은 해당 테두리에서 해당 테두리에 나타나는 요소 내용까지의 공간을 제공합니다. 요소 주위에 테두리가 없으면 여백을 추가해도 해당 요소에 전혀 영향을 미치지 않습니다. 여백이 없기 때문에 테두리가 없습니다.
여유
여백은 요소 외부의 공간을 다음 외부 요소로 정의하는 CSS 속성입니다.
여백은 테두리가 있거나없는 요소에 영향을줍니다. 요소에 테두리가있는 경우 margin은이 테두리에서 다음 외부 요소까지의 공간을 정의합니다. 요소에 테두리가없는 경우 margin은 요소 내용에서 다음 외부 요소까지의 공간을 정의합니다.
패딩과 여백의 차이점
따라서 여백과 패딩의 차이는 안쪽 여백을 처리하는 동안 여백은 다음 외부 요소에 대한 바깥 공간을 처리한다는 것입니다.
margin = 경계에서 바깥쪽으로 요소 주위 (외부) 공간.
패딩 = 텍스트에서 테두리까지 요소 주변 (안쪽)의 공간.
여기를 참조하십시오 : http://jsfiddle.net/robx/GaMpq/
이 사이의 차이점에 대해 알고하는 것이 좋다 margin와 padding. 내가 알듯이 :
- 여백은 요소 의 외부 공간 이며 패딩은 요소의 내부 공간 입니다. 즉, 여백은 요소의 테두리 외부 공간이며 패딩은 테두리 내부의 공간입니다.
auto값을 여백으로 설정할 수 있습니다 . 그러나 패딩은 허용되지 않습니다. 이것을보십시오 .
참고 :margin: auto블록 요소를 부모 내부의 가로 가운데에 배치하는 데 사용 합니다. 또한 여백을 자동으로 설정하여 flexbox 내부의 요소를 세로 또는 가로 또는 두 가지로 가운데에 배치 할 수 있습니다. 이것을보십시오 .- 여백은 임의의 부동 소수점 수가 될 수 있지만 패딩은 음수가 아니어야합니다.
- 요소의 스타일을 지정할 때 패딩도 스타일이 지정됩니다. 그러나 여백은 아닙니다. 여백은 부모 요소의 스타일을 얻습니다. 예를 들어,
background-color속성을 검은 색으로 설정하면 내부 공간 (예 : 패딩)은 검은 색이지만 외부 공간 (예 : 여백)은 아닙니다.
여백과 패딩의 주요 차이점 중 하나는 클릭 가능성 및 호버 감지에 대한 답변에서 언급되지 않았습니다.
패딩을 늘리면 요소의 유효 크기가 증가합니다. 때로는 작은 아이콘이있어 눈에 띄게 크게 만들고 싶지 않지만 사용자는 여전히 해당 아이콘과 상호 작용해야합니다. 클릭 및 호버링을 위해 아이콘의 패딩을 늘리기 위해 아이콘의 패딩을 늘립니다. 아이콘의 여백을 늘리면 같은 효과가 없습니다.
이 주제에 관한 다른 질문에 대한 대답 이 그 예입니다.
여백 은 상자 외부의 공간입니다. 패딩 은 상자 내부의 공간입니다. 흰색 채우기로 차이점을 확인하기는 어렵지만 색상 채우기로 잘 볼 수 있습니다.
여백과 패딩은 실제로 패딩의 유형입니다. ... 한 (여백)은 다른 요소와 거리를두기 위해 요소 테두리 바깥쪽으로 가고 다른 (패딩)은 요소 경계에서 콘텐츠와 거리를두기 위해 요소 콘텐츠 바깥으로갑니다.
패딩을 사용하면 개발자가 텍스트와 둘러싸는 요소 사이의 공간을 유지할 수 있습니다. 여백은 요소가 상위 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>
너비와 높이가있는 블록 div에 배경색을 넣으십시오. 여백은 요소의 크기를 늘리는 반면 여백은 문서의 흐름 내에서 요소를 이동시킵니다.
여백은 특히 요소를 이동시키기위한 것입니다.
패딩은 웹 페이지에서 가장 가까운 구성 요소 사이의 간격이며 여백은 웹 페이지의 여백과의 간격입니다.
한 가지 중요한 차이점이 있습니다.
여백은 요소 외부에 있습니다. 즉, 요소가 시작된 후 "공백"을 적용합니다. 패딩은 내부에 있고 다른 하나는 요소가 시작하기 전에 "공백"을 적용합니다.
여백은 요소 외부에 적용되므로 요소가 다른 요소와 얼마나 떨어져 있는지에 영향을줍니다.
안쪽 여백은 요소 내부에 적용되므로 요소의 내용이 테두리에서 얼마나 떨어져 있는지에 영향을줍니다.
또한 여백을 사용하면 요소의 크기에 영향을 미치지 않지만 패딩은 요소 크기를 설정합니다 (높이 + 패딩 설정). 예를 들어 5px 패딩이있는 100x100px div가있는 경우 div는 실제로 105x105px입니다
기본적으로 패딩과 여백의 차이는 배경으로 나타납니다. 여백은 내용 사이의 간격을 결정하고 여백은 요소의 바깥 쪽 가장자리를 결정합니다!
패딩은 내용과 테두리 사이의 공간입니다. 여백 사이의 공간 어디로 경계와 다른 요소입니다.
참고 URL : https://stackoverflow.com/questions/5958699/difference-between-margin-and-padding
'Programming' 카테고리의 다른 글
| C #에서 목록의 첫 번째 N 요소를 얻는 방법은 무엇입니까? (0) | 2020.03.02 |
|---|---|
| Amazon SNS와 Amazon SQS의 차이점은 무엇입니까? (0) | 2020.03.02 |
| C #에서 숫자를 소수점 이하 두 자리로 반올림하는 방법은 무엇입니까? (0) | 2020.03.02 |
| Gemfile에서 로컬 젬을 어떻게 지정할 수 있습니까? (0) | 2020.03.02 |
| msysgit의 오른쪽 클릭 메뉴 옵션을 어떻게 제거합니까? (0) | 2020.03.02 |