마진과 패딩의 차이점은 무엇입니까

차이: 여백은 자체 프레임에서 다른 컨테이너의 테두리까지의 거리, 즉 컨테이너 외부의 거리를 나타내며, 패딩은 자체 프레임과 테두리 사이의 거리를 나타냅니다. 자체 내부의 다른 컨테이너 거리, 즉 컨테이너 내의 거리는 상자 테두리와 상자 내부 요소 사이의 거리입니다.

이 기사의 운영 환경: Acer S40-51, HBuilder 및 패딩, CSS 박스 모델(Box Model)에 대해 이야기하지 않을 수 없습니다.

일반적으로 CSS 상자 모델은 디자인과 레이아웃에 사용됩니다. 여백, 테두리, 패딩 및 중간 내용을 포함하는 기본적으로 상자입니다. 추천: css 비디오 튜토리얼

아래 그림은 박스 모델입니다. (여기서는 IE5와 IE6에서 이상한 모드로 사용하는 비표준 박스 모델이 아닌 W3C 사양의 표준 박스 모델에 대해서만 이야기합니다):

margin and padding

margin은 자체 프레임에서 다른 컨테이너의 테두리까지의 거리, 즉 컨테이너의 외부 거리를 나타냅니다.

padding은 자체 프레임과 내부의 다른 컨테이너 테두리 사이의 거리, 즉 컨테이너의 내부 거리를 나타냅니다.

margin과 padding의 차이

margin은 상자의 바깥쪽 여백, 즉 상자 사이의 거리이고, padding은 안쪽 여백, 즉 상자의 측면과 상자 사이의 거리입니다. 상자 안의 요소.

(Margin은 요소 사이의 거리를 구분하는 데 사용되며, padding은 요소와 콘텐츠 사이의 거리를 구분하는 데 사용됩니다. Margin은 요소를 분리하여 관련성이 없게 만드는 레이아웃에 사용됩니다. padding은 요소와 콘텐츠 사이의 거리를 설정하는 데 사용됩니다. 콘텐츠 사이의 간격은 콘텐츠(텍스트)와 (래핑된) 요소 사이에 "호흡 거리"를 허용합니다.)

문법 구조

(1) padding-left:10px /margin-left: 10px ; 　　　　 　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　loglogue /Margin

(4)padding-bottom:10px; /margin-bottom:10px;

(6 )padding:10px 20px;/margin:10px 20px; 10px 20px 30px 40px;/여백: 10px 20px 30px 40px; 위쪽, 오른쪽, 아래쪽, 왼쪽 내부/외부 여백

여백 사용 지침:

(1) 테두리 외부에 공백을 추가해야 하는 경우,

(2) 공백에는 배경(색상)이 필요하지 않습니다.

(3) 위아래로 연결된 두 상자 사이의 공백이 서로 오프셋되어야 하는 경우, 예를 들어 여백이 15px+20px이면 20px가 됩니다. 빈 공간.

패딩 사용 지침:

(1) 테두리 내부에 공백을 추가해야 하는 경우(종종 텍스트와 테두리 사이의 거리 설정),

(2) 배경(색상)이 필요한 경우 빈 공간에

(3) 위아래로 연결된 두 상자 사이의 공간이 두 상자의 합과 같을 것으로 예상되는 경우, 예를 들어 패딩이 15px+20px이면 공간은 35px가 됩니다.

패딩 정보:

참고: 패딩을 음수 값으로 설정하는 것은 유효하지 않습니다.

블록 요소 내:

따라서 패딩은 블록 수준 요소(위, 아래, 왼쪽)에서 임의로 설정할 수 있습니다. , 오른쪽, 그러면 요소 내에서 변경이 발생합니다.

인라인 요소:

대체되지 않은 인라인 요소에 설정된 패딩은 줄 높이 계산에 영향을 주지 않습니다. 따라서 요소에 패딩과 배경이 모두 있는 경우 시각적으로 다른 줄로 늘어나 다른 콘텐츠와 겹칠 수 있습니다. 요소의 배경은 패딩을 가로질러 확장됩니다. 인라인 요소의 패딩 요소에는 음수 여백 값을 지정할 수 없습니다. padding-left 및 padding-right만 효과가 있으며 위쪽과 아래쪽은 인식되지 않습니다.

마진 정보:

margin: 0 auto; 블록 수준 요소에서만 작동합니다.

블록 요소에서는:

블록 레벨 요소 아래, 위, 아래, 왼쪽 및 오른쪽을 마음대로 설정할 수 있습니다. 그리고 블록 수준 요소의 마진의 기준 기준은 이전 요소, 즉 그 이전의

요소에 대한 마진 거리입니다. 요소가 첫 번째 요소인 경우 상위 요소를 기준으로 한 여백 거리입니다.

인라인 요소에서:

margin-top 및 margin-bottom은 인라인 요소의 높이(라인에서)에 영향을 주지 않습니다. 인라인 요소의 줄 높이를 변경하려는 경우 이는 다음과 유사합니다.

line-height, fong-size, Vertical-align 세 가지 속성만 사용할 수 있습니다. 인라인 요소의 높이에 영향을 미치는 것은 높이가 아니라 줄 높이라는 점을 기억하세요.

더 많은 관련 기사를 보려면 PHP 중국어 웹사이트를 방문하세요! !

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