Css 박스 모델은 프론트엔드 개발에 자주 사용됩니다. 일반적으로 CSS를 통해 width(너비), padding(안쪽 여백), margin(바깥쪽 여백) 및 기타 속성을 설정하여 전체 상자의 크기를 조정합니다. 이 장에서는 CSS 상자 모델의 패딩 속성을 사용하는 방법을 소개합니다. 도움이 필요한 친구들이 참고할 수 있기를 바랍니다.
패딩을 설정하는 방법은 무엇입니까?
우리의 패딩은 CSS 박스 모델 중 하나이므로 이제 패딩 설정 방법을 살펴보겠습니다.
padding: 선언에서 모든 패딩 속성을 설정할 수 있는 단축 속성입니다.
패딩이 어떻게 생겼는지 알아보기 위해 먼저 완전한 예를 살펴보겠습니다.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>padding--内边距</title>
<style>
.demo{
width: 400px;
border: 1px solid red;
padding: 20px;
}
.cs{
border: double;
}
</style>
</head>
<body>
<div class="demo">
<div class="cs">我是一个div标签，用来测试的，看看我四周的空白</div>
</div>
</body>
</html>Rendering:
부모 상자 div.demo에서 패딩을 20px로 설정할 수 있음을 알 수 있습니다. 내부의 하위 상자 div.cs 주위에 20px 간격을 둡니다.
부모 상자 div.demo의 상단 패딩을 제거하면 어떤 효과가 있을까요?
이렇게 하면 부모 상자 div.demo가 자식 상자 div.cs와 겹칠 수 있습니다. 모든 패딩을 제거하면 더 직관적입니다.
padding 속성에 4개의 값을 설정하고 주변 여백을 각각 설정할 수 있습니다. 예를 들면 다음과 같습니다.
padding：20px 10px 0px 50px;
렌더링:
패딩: 20px 10px 0px 50px를 볼 수 있습니다. 위쪽 여백은 20px, 오른쪽 여백은 10px, 아래쪽 여백은 0px, 왼쪽 여백은 50px입니다. 이런 식으로 내부 여백을 설정하기 위해 패딩을 사용하는 순서가 위쪽, 오른쪽, 아래쪽, 왼쪽이라는 것도 알 수 있습니다. 이는 동시에 4개의 여백을 설정하는 것입니다. CSS는 별도의 여백을 설정할 수도 있습니다. 패딩을 별도로 설정하는 속성을 살펴보겠습니다.
padding-top: 상단 패딩
padding-right: 오른쪽 패딩
padding -bottom: 하단 패딩
padding-left: 왼쪽 패딩
다음 속성의 사용법과 기능을 직관적으로 느낄 수 있도록 예를 들어 보겠습니다.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>padding--内边距</title>
<style>
.demo{
width: 400px;
border: 1px solid red;
padding: 20px;
}
h1{
padding-top: 20px;
border: 1px solid #000;
}
.cs{
border: double;
padding-left: 50px;
padding-right: 30px;
}
p{
border: 1px dashed palevioletred;
padding-bottom: 30px;
}
</style>
</head>
<body>
<div class="demo">
<h1 id="php中文网">php中文网</h1>
<div class="cs">我是一个div标签，用来测试的，看看我四周的空白</div>
<p>我在下面哈哈哈哈哈哈哈哈哈哈哈哈哈哈</p>
</div>
</body>
</html>Rendering:
예. 뻔하지는 않지만 이것이 무엇인지 패딩이 사용됩니다. 누구나 시도해 볼 수 있고 전혀 어렵지 않습니다.
위 내용은 CSS에서 패딩이란 무엇입니까? CSS 패딩 설정 방법(예)의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
Google 글꼴을 태그하고 Goofonts.com을 작성한 방법Apr 12, 2025 pm 12:02 PMGoofonts는 개발자 부인과 디자이너 남편이 서명 한 사이드 프로젝트로, 둘 다 타이포그래피의 큰 팬입니다. 우리는 Google에 태그를 지정했습니다
JavaScript API 상태로 GraphQL 쿼리를 연습하십시오Apr 12, 2025 am 11:33 AMGraphQL API를 구축하는 방법을 배우는 것은 매우 어려울 수 있습니다. 그러나 10 분 안에 GraphQL API를 사용하는 방법을 배울 수 있습니다! 그리고 그것은 완벽하게 얻었습니다
오프셋 경로로 원에 유형을 설정하십시오Apr 12, 2025 am 11:00 AM여기 Yuanchuan의 합법적 인 CSS 속임수입니다. 이 CSS 속성 오프셋 경로가 있습니다. 옛날 옛적에, 그것은 모션 경로라고 불렸다가 이름이 바뀌 었습니다. 나
핫 AI 도구
Undresser.AI Undress
사실적인 누드 사진을 만들기 위한 AI 기반 앱
AI Clothes Remover
사진에서 옷을 제거하는 온라인 AI 도구입니다.
Undress AI Tool
무료로 이미지를 벗다
Clothoff.io
AI 옷 제거제
AI Hentai Generator
AI Hentai를 무료로 생성하십시오.
인기 기사
뜨거운 도구
드림위버 CS6
시각적 웹 개발 도구
SecList
SecLists는 최고의 보안 테스터의 동반자입니다. 보안 평가 시 자주 사용되는 다양한 유형의 목록을 한 곳에 모아 놓은 것입니다. SecLists는 보안 테스터에게 필요할 수 있는 모든 목록을 편리하게 제공하여 보안 테스트를 더욱 효율적이고 생산적으로 만드는 데 도움이 됩니다. 목록 유형에는 사용자 이름, 비밀번호, URL, 퍼징 페이로드, 민감한 데이터 패턴, 웹 셸 등이 포함됩니다. 테스터는 이 저장소를 새로운 테스트 시스템으로 간단히 가져올 수 있으며 필요한 모든 유형의 목록에 액세스할 수 있습니다.
PhpStorm 맥 버전
최신(2018.2.1) 전문 PHP 통합 개발 도구
ZendStudio 13.5.1 맥
강력한 PHP 통합 개발 환경
SublimeText3 Linux 새 버전
SublimeText3 Linux 최신 버전
