CSS에서 여백을 사용하는 방법

CSS의 여백 속성은 위쪽, 아래쪽, 왼쪽 및 오른쪽 방향을 포함하여 요소 주변의 빈 영역을 제어하는 ​​데 사용됩니다. 구문은 margin: []].

CSS

margin 속성의 여백 사용은 요소 주변의 빈 영역을 제어하는 ​​데 사용되며 상위 요소를 기준으로 요소의 외부 공간을 설정할 수 있습니다.

Syntax

<code>margin: <length | auto> [<length | auto> [<length | auto> [<length | auto>]]]</code>

Parameters

• : 픽셀(px), 센티미터(cm), 인치(in) 등의 단위로 지정되는 크기 값입니다.
• : 브라우저의 기본값에 따라 자동으로 여백을 설정합니다.

4개의 여백 값 ​​

margin 속성은 요소 주변의 서로 다른 방향에서 공백을 제어하기 위해 4개의 개별 값을 지정할 수 있습니다.

1. margin-top: 요소 위의 공백을 제어합니다.
2. margin-right: 요소 오른쪽의 공백을 제어합니다.
3. margin-bottom: 요소 아래의 공백을 제어합니다.
4. margin-left: 요소 왼쪽의 공백을 제어합니다.

단일 여백 값 설정

단일 여백 값만 설정하려면 매개변수를 제공할 수 있습니다. 예:

<code>margin: 20px;</code>

이렇게 하면 요소 주위에 20px의 공백이 추가됩니다.

여러 여백 값 설정

여러 여백 값을 설정하려면 여러 매개변수를 제공할 수 있습니다. 예:

<code>margin: 10px 20px 30px 40px;</code>

이것은 요소에 대해 다음을 지정합니다:

• top: 10px
• right: 20px
• bottom: 30px
• left: 40px

auto 키워드 사용

auto 키워드는 브라우저에 다음을 지시합니다. 자동으로 마진 값을 계산합니다. 이는 다음과 같은 특정 상황에서 유용합니다.

<code>margin: auto;</code>

이렇게 하면 요소가 상위 요소 내에서 수평으로 중앙에 배치됩니다.

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