CSS 마진 단위는 무엇입니까?

CSS 마진 단위에는 px, %, em, rem, vw 및 vh, vmin 및 vmax, ex 및 ch, pt 및 pc 등이 포함됩니다. 자세한 소개: 1. px, 고정 길이 단위; 2. %, 여백 단위는 상위 요소의 너비를 기준으로 계산됩니다. 3. em, 여백 단위는 요소의 글꼴 크기를 기준으로 계산됩니다. . rem, 루트 요소의 글꼴 크기를 기준으로 여백을 계산하는 단위 5. vw 및 vh, 뷰포트 너비 및 뷰포트 높이를 기준으로 한 단위;

이 튜토리얼의 운영 체제: Windows 10 시스템, Dell G3 컴퓨터.

CSS 마진 단위는 다음과 같습니다.

픽셀(px): 픽셀은 가장 일반적으로 사용되는 마진 단위 중 하나이며 화면의 한 점을 나타내는 고정된 길이 단위입니다. CSS에서는 픽셀 값을 사용하여 요소의 여백을 설정할 수 있습니다(예: 여백: 10px).

퍼센트(%): 퍼센트는 상위 요소의 너비를 기준으로 여백을 계산하는 데 사용되는 단위입니다. 예를 들어 상위 요소의 너비가 200px이고 여백을 10%로 설정하면 여백은 20px가 됩니다. 백분율 단위를 사용하여 수평 및 수직 여백을 설정할 수 있습니다(예: margin-top: 10%).

em: em은 요소의 글꼴 크기에 상대적인 여백을 계산하는 데 사용되는 단위입니다. 예를 들어 요소의 글꼴 크기가 16px이고 여백이 2em으로 설정된 경우 여백은 32px가 됩니다. em 단위는 수평 및 수직 여백을 설정하는 데에도 사용할 수 있습니다(예: margin-left: 1.5em).

rem: rem은 루트 요소의 글꼴 크기를 기준으로 여백을 계산하는 데 사용되는 단위입니다. 루트 요소는 일반적으로 HTML 요소입니다. em 단위와 달리 rem 단위의 값은 상위 요소의 영향을 받지 않습니다. 예를 들어 루트 요소의 글꼴 크기가 16px이고 여백이 2rem으로 설정된 경우 여백은 32px가 됩니다.

vw 및 vh: vw 및 vh는 뷰포트 너비 및 뷰포트 높이에 상대적인 단위입니다. 뷰포트는 브라우저 창이나 장치 화면의 보이는 영역입니다. vw는 뷰포트 너비의 백분율을 나타내고, vh는 뷰포트 높이의 백분율을 나타냅니다. 예를 들어 뷰포트 너비가 1000px이고 여백이 10vw로 설정된 경우 여백은 100px이 됩니다.

vmin 및 vmax: vmin 및 vmax는 뷰포트 너비와 뷰포트 높이의 더 작거나 큰 것에 대한 백분율입니다. vmin은 뷰포트의 작은 크기를 기준으로 계산되고, vmax는 뷰포트의 더 큰 크기를 기준으로 계산됩니다. 예를 들어 뷰포트 너비가 1000px이고 뷰포트 높이가 800px이고 여백이 10vmin으로 설정된 경우 여백은 80px이 됩니다.

ex 및 ch: ex 및 ch는 글꼴의 "x" 높이와 "0" 문자 너비를 기준으로 여백을 계산하는 단위입니다. 이러한 단위는 일반적으로 특정 글꼴과 관련된 여백을 설정하는 데 사용됩니다. 예를 들어 글꼴의 "x" 높이가 10px이고 여백이 2ex로 설정된 경우 여백은 20px가 됩니다.

pt 및 pc: pt와 pc는 인쇄 단위로 인쇄 시 여백을 설정하는 데 사용됩니다. pt는 1/72인치를 의미하고, pc는 12포인트(1포인트는 1/72인치와 같음)를 의미합니다. 이러한 단위는 웹 개발에서는 거의 사용되지 않으며 인쇄 및 출판 분야에서 더 일반적으로 사용됩니다.

위는 CSS의 일반적인 여백 단위입니다. 특정 요구 사항과 디자인 요구 사항에 따라 요소의 여백을 설정하는 적절한 단위를 선택하면 페이지 레이아웃을 더욱 유연하고 제어 가능하게 만들 수 있습니다.

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