CSS 마진 및 패딩을 설정하는 방법 및 멋진 레이아웃 트릭

이 튜토리얼은 CSS 마진과 패딩의 차이점을 명확하게하여 웹 페이지 요소 간격에 미치는 영향을 보여줍니다. 우리는 반응 형 디자인에서 다양한 장치의 영향을 모색하고 CSS 마진 및 패딩 레이아웃 기술로 마무리합니다.

. 주요 개념 :

CSS 박스 모델은 기본입니다. CSS 요소는 내용, 패딩, 테두리 및 마진에 의해 크기가 정의되는 직사각형 상자입니다. 박스 크기는 종종 초보자를 혼란스럽게합니다. 기본 는 요소의 너비와 높이에 패딩과 경계를 추가하여 종종 레이아웃 문제를 일으 킵니다. 설정은 일반적인 솔루션입니다 CSS는 요소의 네면 모두에서 패딩과 마진을 정확하게 제어합니다. 패딩은 콘텐츠를 둘러싸고 있습니다. 여백은 외부 층이며 요소와 이웃 사이의 공간을 만듭니다. 마진과 패딩에는 컨테이너 내의 요소 중심, 요소 간격 및 이미지 종횡비 유지를 포함하여 다목적 응용 프로그램이 있습니다. 이러한 기술을 마스터하면 많은 레이아웃 문제가 해결됩니다

CSS 박스 모델이 설명되었습니다 :
• CSS 요소는 다음으로 구성된 직사각형 상자입니다
내용 (요소의 내부 텍스트 또는 이미지) 패딩 (콘텐츠와 테두리 사이의 공간) 테두리 (요소의 개요) 마진 (요소와 기타 요소 사이의 외부 공간) box-sizing: content-box 다음 다이어그램은이 구조를 보여줍니다 box-sizing: border-box
• CSS 상자 크기 이해 : 박스 크기는 CSS 신규 이민자들에게 빈번한 혼란의 원천입니다. 두 개의 50% 너비 요소가 패딩과 경계가 추가되어 용기에 맞지 않을 수 있습니다. 기본적으로 패딩과 테두리는 요소의 전체 너비를 증가시킵니다. 레이아웃을 단순화하려면 를 설정하여 패딩과 경계가 지정된 너비 내에 포함됩니다. CSS 재설정은 종종
전 세계적으로 적용됩니다 :
• 대화식 데모를 실험하여 이해를 강화하십시오
CSS에서 패딩을 설정 :

, , , 또는 속성을 사용하여 컨트롤 패딩 :

CSS에서 마진을 설정 :

패딩과 유사하게 ,
• ,
,
• 또는 속성 속성을 ​​사용하십시오 :
여백은 요소 사이에 공간을 만듭니다
• 마진 및 패딩 고려 사항 :
  • 단위 :

    반응 형 디자인의 여백 및 패딩에 대한 절대 단위 (픽셀)를 피하십시오. 백분율 또는 상대 단위 (EM, REM)는 스크린 크기 및 글꼴 변경에 더 잘 적응합니다. 단위 계산 :

    브라우저는 사용 된 단위 (부모 폭에 따른 백분율, 요소 글꼴 크기를 기준으로 EM, 뷰포트 크기를 기반으로 뷰포트 장치)를 기준으로 마진과 패딩을 다르게 계산합니다.

  • 마진 붕괴 : 인접한 형제 자매의 상단 및 하단 여백은 단일 마진으로 붕괴 될 수 있습니다 (두 가지 중 더 큰). 패딩 또는 테두리를 추가하면 이것을 방지합니다

    실용 응용 프로그램 :

  • 중심 : 중앙 블록 레벨 요소

  간격 요소 :

  공간 요소에 마진을 사용하여 특히 Flexbox에 유용합니다.

  측

  • 결론 : 이 튜토리얼은 CSS 마진 및 패딩을 이해하고 사용하는 데있어 탄탄한 기반을 제공합니다. 고급 기술에 대한 추가 탐색은 CSS 기술을 향상시킬 것입니다.

위 내용은 CSS 마진 및 패딩을 설정하는 방법 및 멋진 레이아웃 트릭의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!