CSS의 여백 대 패딩 - 차이점은 무엇입니까?

CSS에서 여백과 패딩의 차이점에 대해 알아보세요.

여백 대 패딩

가장 짧은 정의부터 시작하겠습니다.

• margin HTML 요소의 테두리 외부에 공백 추가
• padding HTML 요소의 테두리 내부에 공백 추가

HTML 요소에 여백 또는 패딩을 적용하면 다음과 같이 요소에 다르게 영향을 줍니다.

위의 개념 설명을 염두에 두고 이 지식을 실제 HTML 요소에 적용해 보겠습니다.

위는 간단한 <button>입니다. <div> 안의 요소 컨테이너.

버튼에는 다음이 포함됩니다.

• 버튼 주위에 공간을 추가하고 버튼이 내부에 있는 상위 요소의 테두리에서 밀어내는 24픽셀 여백
• 4픽셀 테두리
• 버튼의 테두리와 콘텐츠 사이에 공간을 추가하는 16px 패딩
• 콘텐츠(이 경우 텍스트 레이블:버튼)

button {
    padding: 16px; 
    margin: 24px; 
    border: 4px solid #282828;
}

margin 및 padding 속성은 공백을 제어합니다. 그러나 적용하는 방식에 있어서는 반대의 기능을 합니다.