CSS 여백 속성 사용에 대한 자세한 설명
- 高洛峰원래의
- 2017-03-27 09:40:571747검색
여백을 설정하는 가장 쉬운 방법은 여백 속성을 사용하는 것입니다.
여백 속성은 픽셀, 인치, 밀리미터 또는 em 등 모든 길이 단위를 허용합니다.
여백은 자동으로 설정할 수 있습니다. 보다 일반적인 접근 방식은 여백의 길이 값을 설정하는 것입니다. 다음 선언은 h1 요소의 모든 측면에 1/4인치 여백을 설정합니다.
h1 {margin : 0.25in;}
다음 예에서는 h1 요소의 네 측면을 다르게 설정합니다. 여백은 각각 정의되며 사용되는 길이 단위는 픽셀(px)입니다.
h1 {margin : 10px 0px 15px 5px;}
은 내부 여백 설정과 동일합니다. 값은 상단 여백(상단)에서 시작하여 요소를 중심으로 시계 방향으로 회전합니다.
margin: 상단 오른쪽 하단 왼쪽
또한 여백에 대한 백분율 값을 설정할 수도 있습니다. :
p {margin : 10%;}
백분율은 상위 요소의 너비를 기준으로 계산됩니다. 위의 예에서는 p 요소의 여백을 상위 요소 너비의 10%로 설정합니다.
여백의 기본값은 0이므로, 여백 값을 선언하지 않으면 여백이 나타나지 않습니다. 그러나 실제로 브라우저는 이미 많은 요소에 대해 미리 결정된 스타일을 제공하고 있으며 여백도 예외는 아닙니다. 예를 들어 CSS를 지원하는 브라우저에서 여백은 각 단락 요소 위와 아래에 "빈 줄"을 만듭니다. 따라서 p 요소에 여백이 선언되지 않은 경우 브라우저는 자체적으로 여백을 적용할 수 있습니다. 물론, 구체적으로 선언하는 한 기본 스타일은 재정의됩니다.
값 복사
기억하시나요? 이전 두 섹션에서 값 복사에 대해 언급했습니다. 아래에서는 Value Copy를 사용하는 방법을 설명합니다.
가끔 반복되는 값을 입력하는 경우가 있습니다.
p {margin: 0.5em 1em 0.5em 1em;}
값 복사를 사용하면 입력할 필요가 없습니다. 반복적으로 이 숫자 쌍입니다. 위 규칙은 다음 규칙과 같습니다:
p {margin: 0.5em 1em;}
이 두 값은 이전 4개 값을 대체할 수 있습니다. 이것은 어떻게 이루어 집니까? CSS는 여백 값을 4개 미만으로 지정할 수 있는 규칙을 정의합니다. 규칙은 다음과 같습니다.
왼쪽 여백 값이 누락된 경우 오른쪽 여백 값이 사용됩니다.
하단 여백 값이 누락된 경우 상단 여백 값이 사용됩니다.
오른쪽 여백 값이 누락된 경우 위쪽 여백 값이 사용됩니다.
다음 이미지는 이를 보다 직관적으로 이해할 수 있는 방법을 제공합니다.
즉, 여백에 3개의 값을 지정하면 4번째 값(즉, 왼쪽 여백)이 복사됩니다. 두 번째 값(오른쪽 여백) 두 개의 값이 주어지면 2번째 값에서 4번째 값이 복사되고, 1번째 값(상단 여백)에서 3번째 값(하단 여백)이 복사됩니다. 마지막 경우에 하나의 값만 제공되면 이 값에서 다른 세 개의 여백이 복사됩니다(상단 여백).
이 간단한 메커니즘을 사용하면 4개의 값을 모두 적용할 필요 없이 필요한 값만 지정하면 됩니다. 예:
h1 {margin: 0.25em 1em 0.5em;} / * 0.25em 1em 0.5em 1em에 해당 */h2 {margin: 0.5em 1em;} /* 0.5em 1em 0.5em 1em에 해당 */p {margin: 1px;} /* 1px 1px 1px 1px에 해당 * /
이 접근 방식에는 작은 단점이 있습니다. 결국에는 분명히 이 문제에 직면하게 될 것입니다. p 요소의 위쪽 및 왼쪽 여백을 20픽셀로 설정하고 아래쪽 및 오른쪽 여백을 30픽셀로 설정한다고 가정합니다. 이 경우 원하는 결과를 얻으려면 다음과 같이 작성해야 합니다.
p {margin: 20px 30px 30px 20px;}
안타깝게도 이 경우 필요한 값의 수를 줄일 수 없습니다.
또 다른 예를 살펴보겠습니다. 왼쪽 여백을 제외한 모든 여백을 자동으로 설정하려는 경우(왼쪽 여백은 20px):
p {margin: auto auto auto 20px;}
마찬가지로 원하는 효과를 얻을 수 있습니다. 원하다. 문제는 이러한 자동을 입력하는 것이 약간 번거롭다는 것입니다. 요소의 한쪽 여백만 제어하려면 단일 여백 속성을 사용하세요.
단면 여백 속성
단면 여백 속성을 사용하여 요소의 한쪽 여백에 대한 값을 설정할 수 있습니다. p 요소의 왼쪽 여백을 20px로 설정한다고 가정해 보겠습니다. 여백(auto를 많이 입력해야 함)을 사용하는 대신 다음을 수행할 수 있습니다.
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;
}
물론 이 경우 margin:
p {margin: 20px를 사용하는 것이 더 쉬울 수도 있습니다. 30픽셀 30픽셀 20픽셀;}
단면 속성을 사용하든 여백을 사용하든 결과는 동일합니다. 일반적으로 여러 면에 여백을 설정하려면 여백을 사용하는 것이 더 쉽습니다. 그러나 문서화 관점에서는 실제로 어떤 방법을 사용하는지는 중요하지 않으므로 더 쉬운 방법을 선택해야 합니다.
팁 및 참고 사항
팁: Netscape 및 IE에서 body 태그에 대해 정의한 기본 여백 값은 8px입니다. 오페라에서는 그렇지 않습니다. 반대로 오페라에서는 내부 패딩의 기본값을 8px로 정의하고 있기 때문에 전체 웹사이트의 가장자리를 조정하여 오페라에서 올바르게 표시하려면 본문의 패딩을 맞춤 설정해야 합니다.
CSS 여백 예:
<html>
<head>
<style type="text/css">
p.leftmargin {margin-left: 2cm}
</style>
</head>
<body>
<p>这个段落没有指定外边距。</p>
<p class="leftmargin">这个段落带有指定的左外边距。</p>
</body>
</html>
텍스트의 오른쪽 여백 설정:
<html>
<head>
<style type="text/css">
p.rightmargin {margin-right: 8cm}
</style>
</head>
<body>
<p>这个段落没有指定外边距。</p>
<p class="rightmargin">这个段落带有指定的右外边距。这个段落带有指定的右外边距。这个段落带有指定的右外边距。</p>
</body>
</html>
텍스트의 위쪽 여백 설정:
<html>
<head>
<style type="text/css">
p.topmargin {margin-top: 5cm}
</style>
</head>
<body>
<p>这个段落没有指定外边距。</p>
<p class="topmargin">这个段落带有指定的上外边距。</p>
</body>
</html>
아래쪽 여백 설정 텍스트 여백 여백:
<html>
<head>
<style type="text/css">
p.bottommargin {margin-bottom: 2cm}
</style>
</head>
<body>
<p>这个段落没有指定外边距。</p>
<p class="bottommargin">这个段落带有指定的下外边距。</p>
<p>这个段落没有指定外边距。</p>
</body>
</html>
하나의 선언에 있는 모든 여백 속성:
<html>
<head>
<style type="text/css">
p.margin {margin: 2cm 4cm 3cm 4cm}
</style>
</head>
<body>
<p>这个段落没有指定外边距。</p>
<p class="margin">这个段落带有指定的外边距。这个段落带有指定的外边距。这个段落带有指定的外边距。这个段落带有指定的外边距。这个段落带有指定的外边距。</p>
<p>这个段落没有指定外边距。</p>
</body>
</html>위 내용은 CSS 여백 속성 사용에 대한 자세한 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!