CSS에서 padding속성은 정의된 테두리 내부의 요소 콘텐츠 주위에 공간을 생성하는데 사용합니다.
CSS를 사용하면 패딩을 완전히 제어할 수 있으며 요소의 각 측면(상단, 오른쪽, 하단 및 왼쪽)에 대한 패딩을설정하는 속성이 있습니다.
padding-top
padding-right
padding-bottom
padding-left
모든 속성 패딩은 아래와 같은 값을 가질 수 있다.
1. 길이 - px, pt, cm 등의 패딩을 지정합니다.
2. % - 포함하는 요소 너비의 패딩을 %로 지정합니다.
3. 상속 - 패딩이 상위 요소에서 상속되어야 함을 지정합니다.
div {
padding-top: 50px;
padding-right: 30px;
padding-bottom: 50px;
padding-left: 80px;
}
테두리 내부의 요소 주위의 값을 위에 50px, 오른쪽 30px, 아래 50px, 왼쪽 80px 주었다. 페이지 검사를 눌러보면 값이 알맞게 들어가서
나오는걸 볼 수 있다.
각각 주는 방법이 있고 하나의 속성에 모든 패딩 속성을 지정할 수 있다.
속성에 4개의 값이 있는 경우
div {
padding: 25px 50px 65px 80px;
}
3개의 값과 함께 패딩 속시 속성을 사용
(상단 패딩은 25px, 오른쪽 및 왼쪽 패딩은 50px 하단 패딩은 75px)
div {
padding: 25px 50px 75px;
}
속성에 두 개의 값이 있는 경우
(상단 및 하단 패딩은 25px, 오른쪽 및 왼쪽 패딩은 50px)
div {
padding: 25px 50px;
}
속성에 하나의 값만 있는 경우
(4개의 패딩은 모두 25px입니다.)
div {
padding: 25px;
}
[CSS] 깃허브 클론코딩 (1) (0) | 2023.05.13 |
---|---|
[CSS] CSS 박스모델 (0) | 2023.04.22 |
[CSS] 여백(margin)속성 (0) | 2023.04.21 |
[CSS] CSS font-size에 대해서 알아보자. (0) | 2023.04.20 |
[CSS] CSS 텍스트 (0) | 2023.04.20 |
댓글 영역