CSS에서 패딩을 설정하는 방법
- 醉折花枝作酒筹원래의
- 2021-04-21 17:27:516047검색
CSS에서는 padding 속성을 사용하여 요소에 "padding: 값 + 단위 | 백분율 값"만 설정하면 됩니다. padding 속성은 요소의 모든 패딩 너비를 설정하거나 각 측면의 패딩 너비를 설정합니다. 패딩 속성은 음수 여백 값 지정을 허용하지 않습니다.
이 튜토리얼의 운영 환경: Windows7 시스템, CSS3&&HTML5 버전, Dell G3 컴퓨터.
패딩(padding) 설정 방법을 살펴보겠습니다.
우리의 패딩은 CSS 박스 모델 중 하나이므로 이제 패딩 설정 방법을 살펴보겠습니다.
padding: 선언에서 모든 패딩 속성을 설정할 수 있는 단축 속성입니다.
padding 속성만 사용하여 위쪽, 아래쪽, 왼쪽 및 오른쪽 패딩을 변경할 수 있습니다.
가능한 값:
length: 고정 패딩 정의(픽셀, pt, em 등)
%: 백분율 값을 사용하여 패딩 정의
사용법:
padding-left 객체를 왼쪽으로 여백 패딩 간격
div{padding-left:5px}객체 내 왼쪽 패딩 간격은 5px
padding-right 객체 오른쪽부터 여백 패딩 간격을 설정합니다
div{padding-right:5px}객체 내 오른쪽 패딩 간격은 5px
padding-top 설정 객체 상단의 패딩 간격은 5px
div{padding-top:5px}객체 상단의 패딩 간격은 5px
padding-bottom 객체 하단의 패딩 간격을 설정합니다.
div{padding-bottom:5px}객체 하단의 패딩 간격은 5px입니다.
지침
객체의 네 변에 있는 패치 여백을 검색하거나 설정합니다.
파라미터 값 4개를 모두 입력하면 상-우-하-좌 순으로 4면에 적용됩니다.
1개만 제공되면 4개 면 모두에 사용됩니다.
2개 제공시 첫번째는 상하용, 두번째는 좌우용입니다.
3개가 제공되면 첫 번째는 위쪽용, 두 번째는 왼쪽-오른쪽용, 세 번째는 아래쪽용입니다.
인라인 개체에서 이 속성을 사용하려면 먼저 개체의 높이 또는 너비 속성을 설정하거나 위치 속성을 절대값으로 설정해야 합니다.
Padding 값은 음수일 수 없습니다.
예:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<style>
.css{
width:350px;
height:80px;
border:1px solid #00F;
padding-left:40px;
padding-right:40px;
padding-top:40px;
padding-bottom:40px;
/* 可以合起来写成padding:40px; */
}
</style>
</head>
<body>
<div class="css">padding用法</div>
</body>
</html>렌더링:
추천 학습: css 비디오 튜토리얼
위 내용은 CSS에서 패딩을 설정하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!