>  기사  >  웹 프론트엔드  >  CSS 마진이란 무엇입니까? CSS 여백 속성 소개

CSS 마진이란 무엇입니까? CSS 여백 속성 소개

不言
不言원래의
2018-09-30 10:30:436593검색

CSS를 배우면서 CSS 마진이라는 개념을 접하게 되었습니다. 그렇다면 CSS 마진이란 무엇일까요? 테두리 외부는 여백입니다. 여백은 기본적으로 투명하므로 그 뒤에 있는 요소를 가리지 않습니다. 다음으로 이 문서에서는 CSS 여백 속성과 관련된 내용을 소개합니다.

먼저 css의 margin 속성이 margin이라는 것을 알아야 합니다.

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

margin은 요소의 위쪽, 아래쪽, 왼쪽, 오른쪽 여백을 개별적으로 변경할 수도 있고 모든 속성을 한 번에 변경할 수도 있습니다.

그림을 사용하여 CSS 여백 속성 값이 무엇에 해당하는지 살펴보겠습니다.

CSS 마진이란 무엇입니까? CSS 여백 속성 소개

CSS 여백 속성 값은 위쪽 여백, 오른쪽 여백, 아래쪽 여백, 왼쪽 여백의 최대 4개 값을 가질 수 있습니다. 위쪽 여백, 왼쪽 및 오른쪽 여백, 아래쪽 여백을 나타내는 세 가지일 수도 있습니다. 위쪽 및 아래쪽 여백, 왼쪽 및 오른쪽 여백을 나타내는 두 가지일 수도 있습니다. 적어도 하나: 4면 여백을 나타냅니다.

CSS 여백 속성 값은 자동일 수 있으며, 브라우저는 자동으로 여백을 계산하고, 블록 수준 요소는 수평으로 중앙에 표시됩니다. 속성 값은 백분율일 수 있으며, 백분율은 너비를 기준으로 계산됩니다. 상위 요소, 속성 값은 CSS 길이 단위일 수 있으며 값은 음수일 수 있습니다. 속성값은 상속될 수 있습니다.

그럼 css margincode

구현을 직접 살펴보겠습니다. 참고: CSS margin 속성의 기본값은 0이므로 margin에 대한 값을 선언하지 않으면 margin이 나타나지 않습니다.

css 마진 구현 코드는 다음과 같습니다.

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>php中文网</title> 
<style>
p{
    background-color:yellow;
}
p.margin{
    margin:2cm 4cm 3cm 4cm;
}
</style>
</head>
<body>
<p>没有指定外边距大小</p>
<p class="margin">有外边距有外边距有外边距有外边距有外边距有外边距有外边距有外边距有外边距有外边距有外边距有外边距</p>
</body>
</html>

css 마진 구현효과는 다음과 같습니다.

CSS 마진이란 무엇입니까? CSS 여백 속성 소개

마지막으로:

위 내용은 이 글의 전체 내용입니다. CSS 마진에 관심이 있는 분 마진 속성에 대해 더 자세히 알고 싶으시면 css 학습 매뉴얼을 참고하세요.

위 내용은 CSS 마진이란 무엇입니까? CSS 여백 속성 소개의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명:
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.