CSS 박스 모델 소개

1. 여백과 패딩의 차이점:

웹페이지를 벽이라고 상상하면 웹페이지의 콘텐츠는 항상 그림과 같이 상자로 구성됩니다.

상자를 따로 꺼내면 여백, 테두리, 안쪽 여백, 내용의 네 부분으로 구성되어 있습니다.

여기서 빨간색 선으로 표시된 것이 마진(margin), 안쪽으로 회색 선으로 표시된 것이 보더(border), 파란색 선으로 표시된 것이 내부 마진(padding), 그리고 더 안쪽으로 표시되어 있는 것이 구체적인 내용(내용)인데, 사진과 많이 비슷합니까? 이때, 박스모델의 박스는 액자와 사진, 액자와 외벽 사이의 거리, 사진과 액자 사이의 거리로 구성된 블록(div)이라고 생각하셔도 됩니다. 액자와 사진.

2. 예:

1,

div
{

여백:3px 5px 6px;
패딩:4px 6px;
border-width:6px;
border-color:black;
width:500;
heigth:300;
}

이 CSS 정의는 이러한 상자를 설명합니다.

여백과 상단 사이의 거리는 3픽셀, 여백과 왼쪽 및 오른쪽 부분 사이의 거리는 5픽셀, 여백과 하단 사이의 거리는 6픽셀입니다. >테두리 너비는 6픽셀이고 테두리 색상은 검은색입니다.

패딩과 위쪽 및 아래쪽 테두리 사이의 거리는 4픽셀이고 왼쪽 및 오른쪽 테두리로부터의 거리는 6픽셀입니다. 🎜>

사진 크기는 500*300

2. 여백을 예로 들어 상자의 기본값에 대한 설명:

margin:4px;

은 상자와 상단, 오른쪽, 하단 및 왼쪽 여백 사이의 거리가 4픽셀임을 의미합니다.

margin:4px 6px;

은 상자와 상자 사이의 거리를 의미합니다. 위쪽 및 아래쪽 여백은 4픽셀이고 오른쪽과 왼쪽 여백 사이의 거리는 6픽셀입니다.

margin:4px 5px 6px;

는 상자와 위쪽 여백 사이의 거리를 의미합니다. 는 4픽셀, 오른쪽 및 왼쪽 여백으로부터의 거리는 5픽셀, 아래쪽 여백으로부터의 거리는 6픽셀입니다.

margin:4px 5px 6px 7px ;

는 상자와 위쪽 여백 사이는 4픽셀, 오른쪽 여백과의 거리는 5픽셀, 아래쪽 여백과의 거리는 6픽셀, 왼쪽 여백과의 거리는 7픽셀입니다.

위 내용은 CSS 박스 모델 소개의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!