CSS심

CSS 패딩

CSS의 패딩 속성은 요소의 내용과 요소 테두리 사이의 공백을 정의합니다.

패딩은 요소의 (국경 내) 내용 주위의 영역을 지 웁니다.

	주 : 패딩 요소의 배경색에 의해 영향을 받는다!

CSS를 사용하면 패딩을 완벽하게 제어 할 수 있습니다. 요소 (왼쪽 상단, 오른쪽, 하단 등)의 각면의 여백을 설정하는 CSS 속성이 있습니다.

패딩 - 개별 매칭

CSS는 요소의 각 측면의 패딩을 지정하는 속성이 있습니다 :

• padding-top
• padding-right
• padding-bottom
• padding-left

모든 패딩 속성은 다음의 값을 지정할 수 있습니다 :

• 길이는 -에 패딩 지정 px, pt, cm 등
• %는 - 포함 요소의 폭 %에 패딩을 지정
• 상속은 - 패딩이 부모 요소로부터 상속되도록 지정

다음의 예는 모두 네면에 대해 다른 패딩 설정 <p> 요소를 :

패딩 - 약식 속성

코드를 단축하기 위해, 하나의 속성의 모든 패딩 속성을 지정할 수있다.

padding 속성은 다음 각 패딩 속성에 대한 약식 속성이다 :

• padding-top
• padding-right
• padding-bottom
• padding-left

어떻게 작동하는지 그래서, 여기입니다 :

경우 padding 속성은 네 개의 값이 있습니다 :

• 패딩 : 25 픽셀 50 픽셀 75px 100 픽셀;
  • 최고 패딩은 25 픽셀입니다
  • 오른쪽 패딩은 50 픽셀입니다
  • 바닥 패딩 75px입니다
  • 왼쪽 패딩은 100 픽셀입니다

경우 padding 속성은 세 가지 값이 있습니다 :

• 패딩 : 25 픽셀 50 픽셀 75px;
  • 최고 패딩은 25 픽셀입니다
  • 오른쪽 및 왼쪽 패딩은 50 픽셀입니다
  • 바닥 패딩 75px입니다

경우 padding 속성은 두 개의 값이 있습니다 :

• 패딩 : 25 픽셀 50 픽셀;
  • 상단과 하단 패딩은 25 픽셀입니다
  • 오른쪽 및 왼쪽 패딩은 50 픽셀입니다

경우 padding 속성은 하나의 값을 갖는다 :

• 패딩 : 25 픽셀;
  • 네 패딩은 25 픽셀입니다

더 예

하나의 선언의 모든 패딩 속성
이 예는 하나의 선언에서 패딩의 모든 속성을 설정하는 약식 속성을 보여, 하나에서 네 개의 값을 가질 수 있습니다.

왼쪽 패딩을 설정
이 예는 왼쪽 패딩 설정하는 방법을 보여줍니다 <p> 요소를.

오른쪽 패딩을 설정
이 예는 오른쪽 패딩 설정하는 방법을 보여줍니다 <p> 요소를.

상단 여백을 설정합니다
이 예는 상단의 패딩 설정하는 방법을 보여줍니다 <p> 요소를.

바닥 패딩을 설정
이 예는 하단의 여백 설정하는 방법을 보여줍니다 <p> 요소를.

연습으로 자신을 테스트!

연습 1» 운동 2» 운동 3»

모든 CSS 패딩 등록