CSS에서 여백과 패딩의 차이점은 무엇입니까?

CSS에서 마진은 자신의 테두리에서 다른 컨테이너의 테두리까지의 거리, 즉 컨테이너 외부의 거리를 나타냅니다. CSS에서 패딩은 자체 프레임과 자체 내부의 다른 컨테이너 테두리 사이의 거리, 즉 컨테이너 내의 거리를 나타냅니다. 패딩과 마진의 일반적인 사용법을 설명하겠습니다

CSS에서 마진은 자신의 프레임에서 다른 컨테이너의 테두리까지의 거리, 즉 컨테이너 외부의 거리를 나타냅니다. CSS에서 패딩은 자체 프레임과 자체 내부의 다른 컨테이너 테두리 사이의 거리, 즉 컨테이너 내의 거리를 나타냅니다.

다음은 패딩과 여백의 일반적인 사용법을 설명합니다

1.padding

1. 구문 구조

(1)padding-left:10px; 왼쪽 내부 여백

padding-right

:10px; padding-right(3)

padding-top

:10px; padding-top(4)

padding-bottom

:10px; 10px; 4면 통일 패딩 (6) 패딩: 10px 20px 상하좌우 패딩

(7) 패딩: 10px 상하좌우 패딩

(8) 패딩 :10px 20px 30px 40px; 위쪽, 오른쪽, 아래쪽, 왼쪽 패딩

2. 가능한 값 ​​

(1) 길이는 특정 단위로 패딩 길이를 지정합니다. (2) % 상위 요소 기준 너비 패딩 길이

(3) 자동 브라우저는 패딩을 계산합니다

(4) 상속은 패딩이 상위 요소에서 상속되어야 한다고 규정합니다

3 브라우저 호환성 문제

(1) 모든 브라우저는 다음을 지원합니다. padding attribute (2) IE의 모든 버전은 "inherit" 속성 값을 지원하지 않습니다.

2. Margin

1. 구문 구조

(1) margin-left :10px; 왼쪽 여백

(2)margin-right:10px; 오른쪽 여백

(3) margin-top:10px; 위쪽 여백(4)

margin-bottom

:10px; margin: 10px; 네 면 모두에 통합된 여백

(6) margin: 10px 20px; 위쪽, 아래쪽, 왼쪽 및 오른쪽 여백 (7) margin: 10px 20px 위쪽, 왼쪽 및 아래쪽 여백

(8) margin: 10px 20px 30px 40px; 위쪽, 오른쪽, 아래쪽, 왼쪽 여백

2. 가능한 값 ​​

(1) 길이는 특정 단위로 여백 길이를 지정합니다.

(2) % 길이 기준 상위 요소 너비의 여백 (3) auto 브라우저가 여백을 계산합니다.

(4) 상속은 여백이 상위 요소

에서 상속되어야 한다고 규정합니다. 브라우저 호환성 문제

(1) All 모든 브라우저는 margin 속성을 지원합니다

(2) 모든 IE 버전은 속성 값 "inherit"를 지원하지 않습니다

3. margin과 padding의 차이는 다이어그램으로 표현됩니다

위 내용은 CSS에서 여백과 패딩의 차이점은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!