CSS 여백 속성을 사용하는 방법은 무엇입니까? CSS 여백 속성 사용 튜토리얼
- 云罗郡主원래의
- 2018-11-07 14:14:128518검색
CSS에는 중요한 속성 여백이 있습니다. 많은 사람들이 CSS 여백 속성이 무엇인지 모르시나요? 사용 방법은 다음과 같습니다. CSS 여백 속성을 사용하는 방법에 대한 튜토리얼 요약입니다.
margin은 CSS에서 하나의 명령문에서 모든 CSS 여백 속성에 사용되는 약어입니다. 여백은 CSS의 블록 수준 요소 사이의 거리를 제어하므로 둘은 표시되지 않습니다. [추천 학습: CSS3 튜토리얼]
1: CSS 여백 속성 사용 방법
margin 속성에는 아래와 같이 많은 속성이 포함됩니다.
margin left: 왼쪽 내부 여백을 설정하는 것을 의미합니다. top: 상단 요소의 블록 거리 설정을 의미합니다.
margin right: 오른쪽 요소 블록으로부터의 거리 설정을 의미합니다.
margin 하단: 하단 블록 거리 설정을 의미합니다.
2: 방법에 대한 튜토리얼 CSS 여백 속성 사용1.margin left 사용법:
left 여백: 50px; 구문 뒤에는 숫자 또는 백분율이 옵니다. 이 구문은 왼쪽 요소 블록에서 50픽셀 또는 요소에서 거리의 50%를 의미합니다. .
예제를 관찰하기 위해 두 개의 상자를 사용합니다.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>margin-left实例 www.divcss5.com</title>
<style>
.php-a,.php-b
{float:left; width:150px; height:120px; border:1px solid #F00}
.php-b{ margin-left:50px}
.php-c{ margin-left:50px}
</style>
</head>
<body>
<div class="php-a"></div>
<div class="php-b"></div>
</body>
</html>값을 변경하고 변경 사항을 관찰할 수 있지만 효과는 요소의 왼쪽 간격의 위치와 크기입니다.
2. 오른쪽 여백의 사용법은 오른쪽 요소에서 떨어진 픽셀 수로 정의되는 왼쪽 여백과 정확히 반대입니다.
3.margin top: 50px, 구문 뒤에 숫자가 옵니다. 이는 상단 여백이 50픽셀임을 의미하거나 백분율로 표시할 수 있습니다.
4. 마진 하단의 사용법은 마진 상단의 사용법과 유사하며, 방향은 반대입니다.
margin:10px를 사용하여 위쪽, 아래쪽, 왼쪽, 오른쪽을 표현하려면 여백의 시계 방향 회전을 생각해야 합니다. [추천도서 :
margin: auto 속성 사용법에 대한 자세한 설명]위는 CSS margin 속성을 어떻게 사용하는 걸까요? CSS 여백 속성의 사용법 튜토리얼에 대한 전체 소개입니다. CSS3 비디오 튜토리얼에 대해 더 알고 싶다면 PHP 중국어 웹사이트를 주목하세요.
위 내용은 CSS 여백 속성을 사용하는 방법은 무엇입니까? CSS 여백 속성 사용 튜토리얼의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!