> 웹 프론트엔드 > CSS 튜토리얼 > CSS 마진은 무엇을 합니까?

CSS 마진은 무엇을 합니까?

php中世界最好的语言
풀어 주다: 2017-11-21 16:09:47
원래의
5234명이 탐색했습니다.

먼저 margin이 무엇을 의미하는지 알아야 합니다. 여백 속성은 하나의 명령문에서 모든 여백 속성을 설정하는 CSS의 약칭 속성입니다. 각 요소 사이의 거리를 제어하는 ​​데 사용되는 속성입니다. 그들은 투명하고 보이지 않습니다.

margin 속성에는 왼쪽 여백: 왼쪽 요소 블록으로부터의 거리(왼쪽 내부 여백 로부터의 거리 설정), 여백 상단: 상단(상단) 요소 블록으로부터의 거리(상단 요소 블록으로부터의 거리 설정); margin right: 오른쪽으로부터의 거리 요소 블록 거리(오른쪽 요소 블록으로부터의 거리 설정), margin bottom: 아래쪽 요소 블록 거리(하위(아래) 요소 블록으로부터의 거리 설정) 2차원 구성 다이어그램은 CSS 속성 2차원 다이어그램에서 볼 수 있습니다.

왼쪽 여백 사용법: margin-left:10px; 이는 왼쪽 요소 블록에서 10픽셀을 의미하며, 그 뒤에 (margin-left:10%; 왼쪽 요소 블록에서 10% 거리)와 같은 백분율이 올 수 있습니다. CSS margin-left 튜토리얼 ;

margin right 사용법: margin-right:10px; 이는 오른쪽 요소 블록에서 10픽셀을 의미하며 그 뒤에는 (margin-right:10%; 10% distance)

margin top 사용법: margin-top:10px; 이는 상단 요소 블록에서 10픽셀을 의미하며 그 뒤에는 (margin-top:10%; 10%) 상단 요소 블록으로부터의 거리) CSS margin-top;

margin 하단 사용법: margin-bottom:10px; 이는 하단 요소 블록으로부터 10픽셀을 의미하며, 그 뒤에는 (margin-bottom: 10%; 하단 요소 블록으로부터의 거리 10%) CSS margin-bottom ;

마진 중간에 있는 "-" 링크에 주의하세요. 거리 값을 설정할 때 ":"를 사용하여 값을 지정하세요. ";"로 끝나며, 모두 소문자 반각을 사용합니다.

왼쪽과 오른쪽 모두에 여백 값을 설정해야 하는 경우 CSS를 최적화하기 위해 약어로 구현할 수 있습니다.

예를 들어 약어는

margin:10px입니다. 이는 상단, 하단, 왼쪽 및 오른쪽 요소 블록 사이의 거리가 10픽셀(10픽셀)임을 의미하며 이는 margin-top:10px와 같습니다. 하단:10px; margin-right:10px ; 동일한 효과의 약어

margin:5px 10px; 상단 요소 블록과 하단 요소 블록 사이의 거리가 5px임을 의미합니다. 오른쪽 요소 블록은 10px이며, 이는 margin-top:5px; margin-left:10px; margin-right:10px; 위쪽 요소 블록 사이의 거리는 5px이고 아래쪽 요소 블록 사이의 거리는 7PX이며 왼쪽과 오른쪽 요소 블록 사이의 거리는 6px이며 이는 margin-top:5px와 같습니다. margin - left:6px; margin-right:6px; 동일한 효과의 약어

margin:5px 6px 7px 8px; 즉, 위쪽 요소 블록 거리는 5px, 아래쪽 요소 블록 거리는 7px입니다. 왼쪽 요소 블록 거리는 margin-top:5px; margin-right:7px; margin-right:8px와 동일합니다.

CSS의 여백 속성이 필요한 친구는 이를 저장할 수 있습니다. 이 사이트의 다른 업데이트에도 계속 관심을 가져주세요.

관련 자료:

다양한 기본 그래픽 그리기를 위한 CSS3 팁


HTML 및 CSS 제작 QQ 펭귄 튜토리얼

이 CSS 원칙을 이해하셨나요?

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

관련 라벨:
원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
최신 이슈
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿