이번에는 패딩에 대해서 알아보도록 하겠습니다. 패딩은 내용과 테두리 사이의 간격을 말합니다. 이전에 여백( 또는 마진)에 대해서 공부한 적이 있었죠? 마진과 패딩의 차이가 무엇인지 아시겠죠? 잘 모르시겠다구요? 그럼 일단 패딩 관련된 속성에는 어떤 것들이 있는지 한번 보도록 합시다. 패딩 속성에 대한 속성값은 길이, 퍼센티지, 또는 inherit입니다. inherit 는 부모의 그 값과 동일하게 한다는 의미입니다.퍼센티지 값이 사용되었다면 내용물이 들어있는 컨텐트 박스 안에서의 퍼센티지입니다.
다음은 패딩관련 속성들 입니다.
padding-bottom
padding-top
padding-left
padding-right
padding
그럼 이제 각 속성에 대한 예제를 보러 가 봅시다~~~ Go Go Go ~
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 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 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 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 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
| [CSS] 17. Outlines ( 외곽선, 아웃라인 ) (0) | 2016.06.12 |
|---|---|
| [CSS] 16. Cursor ( 마우스 커서 모양 ) (0) | 2016.06.12 |
| [CSS] 14. Lists ( 리스트, 목록 ) (0) | 2016.06.12 |
| [CSS] 13. Margins ( 마진, 여백 ) (0) | 2016.06.12 |
| [CSS] 12. Borders ( 테두리, 보더 설정 ) (0) | 2016.06.12 |