CSS에서 여백 과 패딩 의 차이점은 정확히 무엇입니까 ? 실제로 많은 목적을 달성하지 못하는 것 같습니다. 차이점이 어디에 있는지 (그리고 차이점을 아는 것이 왜 중요한지) 예를 들어 주시겠습니까?
답변
padding내용과 사이의 공간 border인 반면 margin테두리 외부의 공간입니다. 빠른 Google 검색에서 찾은 이미지는이 아이디어를 보여줍니다.
답변
여기에 대한 답변에서 빠진 한 가지 핵심 사항은 다음과 같습니다.
위 / 아래 여백은 접을 수 있습니다.
따라서 요소 하단에 20px 여백이 있고 다음 요소 상단에 30px 여백이 있으면 두 요소 사이의 여백은 50px가 아닌 30px입니다. 왼쪽 / 오른쪽 여백 또는 패딩에는 적용되지 않습니다.
답변
여백은 요소 외부 에 적용 되므로 요소가 다른 요소와 얼마나 떨어져 있는지에 영향을줍니다.
패딩은 요소 내부 에 적용 되므로 요소의 내용이 테두리에서 얼마나 멀리 떨어져 있는지에 영향을줍니다.
또한 여백을 사용하면 요소의 크기에 영향을 미치지 않지만 패딩은 요소 크기를 설정합니다 (높이 + 패딩 설정). 예를 들어 5px 패딩이있는 100x100px div가있는 경우 div는 실제로 105x105px입니다
답변
다음 3 가지 사항을 기억하십시오.
- 여백은 컨트롤 주위 의 추가 공간 입니다.
- 패딩은 컨트롤 내부 의 추가 공간 입니다.
- 외부 컨트롤 의 패딩은 내부 컨트롤의 여백입니다 .
데모 이미지 🙁 빨간색 상자는 욕망 제어)
답변
가장 간단한 방어는; 패딩은 컨테이너 요소의 테두리 내부에 제공된 공간이며 여백은 외부에 제공됩니다. 컨테이너가 아닌 요소의 경우 패딩은 그다지 의미가 없지만 마진은 방어 적으로 정렬하는 데 도움이됩니다.
답변
여백은 테두리 내부 공간 이며 여백은 테두리 외부 공간 입니다.
답변
심
패딩은 요소 내용과 테두리 사이의 간격을 정의하는 CSS 속성입니다 (테두리가있는 경우). 요소 주위에 테두리가있는 경우 패딩은 해당 테두리에서 해당 테두리에 나타나는 요소 내용까지의 공간을 제공합니다. 요소 주위에 테두리가없는 경우 여백을 추가해도 해당 요소에 전혀 영향을 미치지 않습니다. 여백을 두는 테두리가 없기 때문입니다.
여유
여백은 요소 외부의 공간을 다음 외부 요소로 정의하는 CSS 속성입니다.
여백은 테두리가 있거나없는 요소에 영향을줍니다. 요소에 테두리가있는 경우 margin은이 테두리에서 다음 외부 요소까지의 공간을 정의합니다. 요소에 테두리가없는 경우 margin은 요소 내용에서 다음 외부 요소까지의 공간을 정의합니다.
패딩과 여백의 차이점
따라서 여백과 패딩의 차이는 안쪽 여백을 처리하는 동안 여백은 다음 외부 요소에 대한 바깥 공간을 처리한다는 것입니다.
