CSS 여백(여백)

CSS Margin(margin)

CSS Margin(margin) 속성은 요소 주위의 공간을 정의합니다.

Margin

margin은 요소 주변 영역(외부 테두리)을 지웁니다. 여백은 배경색이 없으며 완전히 투명합니다.

여백은 요소의 위쪽, 아래쪽, 왼쪽 및 오른쪽 여백을 독립적으로 변경할 수 있습니다. 모든 속성을 한 번에 변경하는 것도 가능합니다. 단위는 픽셀, 퍼센트, 센티미터 등을 사용할 수 있습니다.

CSS 여백 속성

CSS에서는 측면별로 여백을 다르게 지정할 수 있습니다

propertiesmarginmargin-bottommargin-leftmargin-rightmargin-top

De 비문
약어 속성. 하나의 문에서 모든 여백 속성을 설정합니다.
요소의 아래쪽 여백을 설정합니다.
요소의 왼쪽 여백을 설정합니다.
요소의 오른쪽 여백을 설정합니다.
요소의 위쪽 여백을 설정합니다.

예여백을 서로 다른 면에 설정하세요

        <!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>php中文网(php.cn)</title>
    <style>
        p
        {
            background-color:yellow;
        }
        p.margin
        {
            margin-top:100px;
            margin-bottom:100px;
            margin-right:50px;
            margin-left:50px;
        }
    </style>
</head>

<body>
<p>这是一个没有指定边距大小的段落。</p>
<p class="margin">这是一个指定边距大小的段落。</p>
</body>

</html>

프로그램을 실행하여 사용해 보세요

Margin - 단축 속성코드를 단축하려면 사용이 가능하다 속성 중간 여백 모든 여백 속성이 지정되었습니다. 이를 약어 속성이라고 합니다.

모든 여백 속성의 약어 속성은 "margin"입니다.

예

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>php中文网(php.cn)</title>
    <style>
        p
        {
            background-color:yellow;
        }
        p.margin
        {
            margin:100px 50px;
        }
    </style>
</head>

<body>
<p>这是一个没有指定边距大小的段落。</p>
<p class="margin">这是一个指定边距大小的段落。</p>
</body>

</html>

프로그램을 실행하여 사용해 보세요.

margin 속성은 1~4개의 값을 가질 수 있습니다.

margin

: 25px 50px 75px 100px;상단 여백은 25px

오른쪽 여백은 50px

하단 여백은 75px

왼쪽 여백은 100px

margin

:25px 50px px;
상단 여백 약 25px

여백은 50px

하단 여백은 75px

margin

: 25px 50px;
all 4개의 여백은 모두 25px

예제 더보기

여백 설정 센티미터와 백분율 값을 사용하여

         <!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>PHP中文网（php.cn）</title>
    <style>
        p{background-color: #8de943
        }
        p.ex1 {margin-top:2cm;}
        p.bottommargin {margin-bottom:25%;}
    </style>
</head>

<body>

<p>一个没有指定边距大小的段落。</p>
<p class="ex1">一个2厘米上边距的段落。</p>

<p class="bottommargin">这是一个用百分比设置的下边距大小的段落。</p>

</body>
</html>

프로그램을 실행하여 사용해 보세요

지속적인 학습

||

새로운 파일

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>PHP中文网（php.cn）</title> <style> p{background-color: #8de943 } p.ex1 {margin-top:2cm;} p.bottommargin {margin-bottom:25%;} </style> </head> <body> <p>一个没有指定边距大小的段落。</p> <p class="ex1">一个2厘米上边距的段落。</p> <p class="bottommargin">这是一个用百分比设置的下边距大小的段落。</p> </body> </html>

제출하다 코드 재설정
자동운전