padding 속성으로 내부 여백 지정하기 (모든 경우의 수)

 

CSS에서 `padding`을 사용하여 요소의 내부 여백을 설정할 수 있습니다. `padding` 속성에는 네 개의 방향(위, 오른쪽, 아래, 왼쪽)에 대해 각각의 여백을 설정할 수 있습니다. 다양한 코드 조합을 통해 필요한 여백을 설정할 수 있으며, 그 조합들을 모두 정리해보았습니다!

 

1. 단일 값

단일 값을 사용하면 모든 방향의 여백이 동일하게 설정됩니다.

아래 코드는 요소의 모든 방향(위, 오른쪽, 아래, 왼쪽)에 20px의 여백을 설정합니다.

padding: 20px;

 

2. 두 개의 값

두 개의 값을 사용하면 첫 번째 값이 위와 아래 여백에, 두 번째 값이 왼쪽과 오른쪽 여백에 적용됩니다.

아래 코드는 위와 아래 여백을 10px, 왼쪽과 오른쪽 여백을 20px로 설정합니다.

padding: 10px 20px;

 

 

3. 세 개의 값

세 개의 값을 사용하면 첫 번째 값이 위 여백에, 두 번째 값이 왼쪽과 오른쪽 여백에, 세 번째 값이 아래 여백에 적용됩니다.

아래 코드는 위 여백을 10px, 왼쪽과 오른쪽 여백을 20px, 아래 여백을 30px로 설정합니다.

padding: 10px 20px 30px;

 

 

4. 네 개의 값

네 개의 값을 사용하면 각각 위, 오른쪽, 아래, 왼쪽 여백에 순서대로 적용됩니다.

아래 코드는 위 여백을 10px, 오른쪽 여백을 20px, 아래 여백을 30px, 왼쪽 여백을 40px로 설정합니다.

padding: 10px 20px 30px 40px;

 

5. 개별 속성

개별적으로 각 방향의 여백을 설정할 수도 있습니다.
아래 코드는 각각 위, 오른쪽, 아래, 왼쪽 여백을 개별적으로 설정합니다.

padding-top: 10px;
padding-right: 20px;
padding-bottom: 30px;
padding-left: 40px;

 

 

예제: 모든 조합을 사용한 코드

Padding: 20px

Padding: 10px 20px

Padding: 10px 20px 30px

Padding: 10px 20px 30px 40px

Padding: top 10px, right 20px, bottom 30px, left 40px

위의 예제는 다양한 `padding` 조합을 사용하여 요소에 적용한 결과를 보여줍니다. 이 조합들을 통해 CSS에서 요소의 내부 여백을 유연하게 조절할 수 있습니다.