코딩 공부
비전공자를 위한 HTML/CSS-padding
뉴 데이
2022. 5. 4. 12:34
padding 속성
기본 값 : 0
< 속성 값 >
| length | 고정값으로 지정합니다. (ex. px, em ....) |
| percent | 요소의 width에 상대적인 크기를 지정합니다. |
padding-top content 영역의 위쪽 여백을 지정합니다.
padding-right content 영역의 오른쪽 여백을 지정합니다.
padding-bottom content 영역의 아래쪽 여백을 지정합니다.
padding-left content 영역의 왼쪽 여백을 지정합니다.
syntax
padding: [-top] [-right] [-bottom] [-left];
0 10px 20px 30px /* 상, 우, 하, 좌 다름 */
0 10px 20px /* 좌, 우 같음 */
0 10px /* 상, 하 같음 & 좌, 우 같음 */
0 /* 상, 우, 하, 좌 모두 같음 */
기본적으로 padding의 4가지 속성을 위와 같이 축약하여 사용할 수 있습니다.
속성의 순서는 고정되어있으며, 위쪽을 기준으로 시계방향으로 돌아간다고 생각하면 쉽습니다.
축약형으로 사용할 때 반드시 4개의 속성에 대한 값을 모두 적어야 하는 것은 아닙니다.
속성값은 1~4개의 값을 사용할 수 있으며 border에서는 축약형 사용 시 정의되지 않은 속성값에 대해서 기본값이 적용되었지만, padding은 조금 다른 방식으로 동작합니다.
그 이유는 상하, 좌우 영역의 값이 같을 때 하나로 합쳐서 적용할 수도 있기 때문입니다.
- padding : 20px 30px 40px 30px 일 때, 좌우의 패딩 값이 같을 때 padding : 20px 30px 40px 와 같이 함축하여 사용할 수 있습니다.
- padding : 20px 30px 20px 일 때, 좌우 패딩과 마찬가지로 상하의 패딩 값이 같을 때 padding : 20px 30px 와 같이 함축하여 사용 할 수 있습니다.
- padding : 20px 20px ( = 20px, 20px, 20px, 20px )일 때, 상하좌우 패딩 값이 모두 같을 때 padding : 20px 와 같이 하나의 값으로 함축하여 사용할 수 있습니다.
* 참고 : CSS에서 0 값에 대해서는 단위를 따로 적지 않습니다.
0px = 0% = 0em = 0pt... => " 0 "
코드실습
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>padding</title>
<style>
div {
padding-top: 10px;
padding-right: 20px;
padding-bottom: 40px;
padding-left: 20px;
/* 축약형 */
padding: 10px 20px 40px;
}
</style>
</head>
<body>
<div> css padding 속성 실습 </div>
</body>
</html>
참고자료
padding
The padding CSS property sets the padding area on all four sides of an element. It is a shorthand for setting all individual paddings at once: padding-top, padding-right, padding-bottom, and padding-left.