CSS 여백을 정의하는 방법

요소 테두리를 둘러싸는 공백이 여백입니다. 여백을 설정하면 요소 외부에 추가 "공백"이 생성됩니다.

여백을 설정하는 가장 쉬운 방법은 길이 단위, 백분율 값 또는 음수 값까지 허용하는 여백 속성을 사용하는 것입니다.

CSS 여백 속성                                                                                       ~                                        .

margin 속성은 픽셀, 인치, 밀리미터, em 등 모든 길이 단위를 허용합니다.

여백은 자동으로 설정할 수 있습니다. 보다 일반적인 접근 방식은 여백의 길이 값을 설정하는 것입니다. 다음 선언은 h1 요소의 각 측면에 1/4인치 너비의 여백을 설정합니다.

h1 {margin : 0.25in;}

다음 예에서는 h1 요소의 네 측면에 대해 서로 다른 여백을 정의합니다. 사용되는 길이 단위는 픽셀(px)입니다.

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

이 값의 순서는 위쪽 여백(상단)에서 시작하여 요소를 중심으로 시계 방향으로 회전합니다.

margin: top right bottom left

또한 여백에 대한 백분율 값을 설정할 수도 있습니다.

p {margin : 10%;}

백분율은 상위 요소의 너비를 기준으로 계산됩니다. 위의 예에서는 p 요소의 여백을 상위 요소 너비의 10%로 설정합니다.

여백의 기본값은 0이므로, 여백 값을 선언하지 않으면 여백이 나타나지 않습니다.

그러나 실제로 브라우저는 이미 많은 요소에 대해 미리 결정된 스타일을 제공하고 있으며 여백도 예외는 아닙니다.

예를 들어 CSS를 지원하는 브라우저에서 여백은 각 단락 요소 위와 아래에 "빈 줄"을 만듭니다.

따라서 p 요소에 여백이 선언되지 않으면 브라우저가 자체적으로 여백을 적용할 수 있습니다. 물론, 구체적으로 선언하는 한 기본 스타일은 재정의됩니다.

위 내용은 CSS 여백을 정의하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!