[CSS] 15. Paddings ( 패딩 )

이번에는 패딩에 대해서 알아보도록 하겠습니다. 패딩은 내용과 테두리 사이의 간격을 말합니다. 이전에 여백( 또는 마진)에 대해서 공부한 적이 있었죠? 마진과 패딩의 차이가 무엇인지 아시겠죠? 잘 모르시겠다구요? 그럼 일단 패딩 관련된 속성에는 어떤 것들이 있는지 한번 보도록 합시다. 패딩 속성에 대한 속성값은 길이, 퍼센티지, 또는 inherit입니다.  inherit 는 부모의 그 값과 동일하게 한다는 의미입니다.퍼센티지 값이 사용되었다면 내용물이 들어있는 컨텐트 박스 안에서의 퍼센티지입니다.

다음은 패딩관련 속성들 입니다.

• padding-bottom  

• padding-top  

• padding-left  

• padding-right  

• padding  

그럼 이제 각 속성에 대한 예제를 보러 가 봅시다~~~ Go Go Go ~

The padding-bottom Property:

The padding-bottom property sets the bottom padding (space) of an element. This can take a value in terms of length of %.

 

다음 예제를 한번 볼까요. 

<p style="padding-bottom: 15px; border:1px solid black;"> This is a paragraph with a specified bottom padding </p> <p style="padding-bottom: 5%; border:1px solid black;"> This is another paragraph with a specified bottom padding in percent </p>

 

결과는 아래와 같습니다.

This is a paragraph with a specified bottom padding This is another paragraph with a specified bottom padding in percent

 

The padding-top Property:

The padding-top property sets the top padding (space) of an element. This can take a value in terms of length of %.

 

다음 예제한번 볼까요.

<p style="padding-top: 15px; border:1px solid black;"> This is a paragraph with a specified top padding </p> <p style="padding-top: 5%; border:1px solid black;"> This is another paragraph with a specified top padding in percent </p>

 

결과는 아래와 같습니다.

This is a paragraph with a specified top padding This is another paragraph with a specified top padding in percent

 

The padding-left Property:

The padding-left property sets the left padding (space) of an element. This can take a value in terms of length of %.

 

다음 예제를 한번 볼까요.

<p style="padding-left: 15px; border:1px solid black;"> This is a paragraph with a specified left padding </p> <p style="padding-left: 15%; border:1px solid black;"> This is another paragraph with a specified left padding in percent </p>

 

결과는 아래와 같습니다.

This is a paragraph with a specified left padding This is another paragraph with a specified left padding in percent

 

The padding-right Property:

The padding-right property sets the right padding (space) of an element. This can take a value in terms of length of %.

 

다음 예제를 한번 볼까요.

<p style="padding-right: 15px; border:1px solid black;"> This is a paragraph with a specified right padding </p> <p style="padding-right: 5%; border:1px solid black;"> This is another paragraph with a specified right padding in percent </p>

 

결과는 아래와 같습니다.

This is a paragraph with a specified right padding This is another paragraph with a specified right padding in percent

 

The padding Property:

The padding property sets the left, right, top and bottom padding (space) of an element. This can take a value in terms of length of %.

 

다음 예제를 한번 볼까요.

<p style="padding: 15px; border:1px solid black;"> all four padding will be 15px </p> <p style="padding:10px 2%; border:1px solid black;"> top and bottom padding will be 10px, left and right padding will be 2% of the total width of the document. </p> <p style="padding: 10px 2% 10px; border:1px solid black;"> top padding will be 10px, left and right padding will be 2% of the total width of the document, bottom padding will be 10px </p> <p style="padding: 10px 2% 10px 10px; border:1px solid black;"> top padding will be 10px, right padding will be 2% of the total width of the document, bottom padding and top padding will be 10px </p>

 

결과는 아래와 같습니다.

all four paddings will be 15px top and bottom paddings will be 10px, left and right paddings will be 2% of the total width of the document. top padding will be 10px, left and right padding will be 2% of the total width of the document, bottom padding will be 10px top padding will be 10px, right padding will be 2% of the total width of the document, bottom padding and top padding will be 10px

 

 

 

 

 

 

Reference :  http://www.tutorialspoint.com/css/css_padding.htm