[웹프로그래밍 ]CSS따라잡기 -패딩(padding)속성적용하기

[웹프로그래밍 ]CSS따라잡기 -패딩(padding)속성적용하기

CSS 패딩속성 부여하기
CSS padding속성은 내용 주위에 공간을 생성하는 데 사용됩니다.
패딩은 요소 주위의 내용 (테두리 안쪽)을 지 웁니다.
CSS를 사용하면 패딩을 완전히 제어 할 수 있습니다. 요소의 각면 (위쪽, 오른쪽, 아래쪽 및 왼쪽)에 대해 채우기를 설정하기위한 CSS 속성이 있습니다.
패딩 - 개별면
CSS에는 요소의 각면에 대해 채우기를 지정하는 속성이 있습니다.
padding-top
padding-right
padding-bottom
padding-left
모든 패딩 속성은 다음 값을 가질 수 있습니다.
length - px, pt, cm 등의 패딩을 지정합니다.
% - 포함하는 요소의 너비에 대한 패딩을 %로 지정합니다.
inherit - 패딩을 부모 요소로부터 상속해야한다고 지정합니다.
다음 예제에서는 <p> 요소의 네면에 대해 서로 다른 패딩을 설정합니다.
예
p {
    padding-top: 50px;
    padding-right: 30px;
    padding-bottom: 50px;
    padding-left: 80px;
}
 

 

 

 

패딩 - 속성
코드를 단축하려면 모든 패딩 속성을 하나의 속성에 지정할 수 있습니다.
이 padding속성은 다음과 같은 개별 패딩 속성의 속기 속성입니다.
padding-top
padding-right
padding-bottom
padding-left
예
p {
    padding: 50px 30px 50px 80px;
}

 

그래서, 그것이 작동하는 방법은 다음과 같습니다 :
padding속성에 4 개의 값 이있는 경우 :
패딩 : 25px 50px 75px 100px;
상단 패딩은 25px입니다.
오른쪽 패딩은 50 픽셀입니다.
하단 패딩은 75px입니다.
왼쪽 패딩은 100px입니다.
padding속성에 세 개의 값 이있는 경우 :
패딩 : 25px 50px 75px;
상단 패딩은 25px입니다.
오른쪽 및 왼쪽 패딩은 50 픽셀입니다.
하단 패딩은 75px입니다.
padding속성에 두 개의 값 이있는 경우 :
패딩 : 25px 50px;
상단 및 하단 패딩은 25px입니다.
오른쪽 및 왼쪽 패딩은 50 픽셀입니다.
padding속성에 하나의 값 이있는 경우 :
패딩 : 25px;
4 개의 패딩 모두 25 픽셀입니다.
예
div.ex1 {
    padding: 25px 50px 75px 100px;
}
div.ex2 {
    padding: 25px 50px 75px;
}
div.ex3 {
    padding: 25px 50px;
}
div.ex4 {
    padding: 25px;
}
위 속성을 적욯한 값은 아래와 같습니다.
 

 

 ====================================================

직장을 다니면서 투잡(알바/부업)으로 월급 많큼 수익을 얻고 싶으시다면  

아래 접속하셔서 상담받아 보실 수 있습니다. (믿음의 재택부업회사)