마진과 패딩의 차이점은 무엇입니까-CSS 튜토리얼-php.cn

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

青灯夜游

풀어 주다： 2021-01-15 13:49:49

원래의

53356명이 탐색했습니다.

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

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

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

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

margin and padding

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

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

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만 효과가 있으며 위쪽과 아래쪽은 인식되지 않습니다.