CSS 입문 튜토리얼: 여백 속성

여백을 설정하는 가장 쉬운 방법은 여백 속성을 사용하는 것입니다. 여백은 객체 레이블 사이의 거리를 설정하는 데 사용됩니다. 예를 들어 두 개의 DIV 상자가 서로 위에 배열되어 있는 경우 여백 스타일을 사용하여 위와 아래의 두 상자 사이의 거리를 확보할 수 있습니다. 여백 속성은 픽셀, 인치, 밀리미터 또는 em 등 모든 길이 단위를 허용합니다. 여백은 자동으로 설정할 수 있습니다. 보다 일반적인 접근 방식은 여백의 길이 값을 설정하는 것입니다. 다음 문은 h1 요소의 각 측면에 1/4인치 너비의 여백을 설정합니다. h1 {margin : 0.25in;} 다음은 h1 요소의 네 측면에 대해 서로 다른 여백과 사용되는 길이 단위를 정의합니다. 픽셀(px)입니다.

h1 {margin : 10px 0px 15px 5px;}

이 값의 순서는 위쪽 여백(상단)부터 시작하여 요소를 중심으로 시계 방향으로 회전합니다. margin: p {margin : 10%;}에 대한 백분율 값을 설정할 수도 있습니다. 그러면 p 요소의 여백은 상위 요소 너비의 10%가 됩니다. 여백의 기본값은 0이므로 여백 값을 선언하지 않으면 여백이 나타나지 않습니다. 그러나 실제로 브라우저는 이미 많은 요소에 대해 미리 결정된 스타일을 제공하고 있으며 여백도 예외는 아닙니다. 디자인을 중앙에 배치하려면 여백을 사용하세요. 기본 사용법은 다음과 같습니다. 객체를 중앙에 배치하려면 자동; 그러나 한 가지 조건이 필요합니다. 즉, 객체의 상위자가 text-align:center 콘텐츠 중심 속성 스타일을 설정해야 합니다. 일부 브라우저는 body 태그에 대해 text-align:center 콘텐츠 중심 스타일을 설정하지 않습니다. 기본 포함 객체가 margin: 0 auto로 설정된 경우 레이아웃은 주요 브라우저와 호환되기 위해 중앙에 배치됩니다. body: center 속성 스타일에 대해 텍스트 정렬을 설정하는 것이 좋습니다.

CSS 단일 여백 속성

단일 여백 속성을 사용하여 요소 한쪽의 여백 값을 설정할 수 있습니다. p 요소의 왼쪽 여백을 20px로 설정하려는 경우 다음 방법을 사용할 수 있습니다.

p {margin-left: 20px;}

다음 속성 중 하나를 사용하면 다른 여백에 직접적인 영향을 주지 않고 해당 요소의 여백만 설정할 수 있습니다. margin -top, margin-right, margin-bottom, margin-left
이러한 일방적인 속성을 여러 개 사용할 수 있습니다. 예를 들면 다음과 같습니다.

h2 {
margin-top: 20px;
margin-right: 30px;
margin-bottom: 30px;
margin-left: 20px;
}

p {margin: 20px 30px 30px 20px; } , 약어 논리는 여전히 위, 오른쪽, 아래, 왼쪽입니다.

위 내용은 CSS 입문 튜토리얼: 여백 속성의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!