반응형
margin과 비슷하게 padding은 간격을 조정할 때 주로 사용한다.
1. padding의 특징 (margin과 비교)
padding과 margin은 영역의 간격을 조정할 때 사용한다는 공통점이 있다.
하지만, padding은 margin과 다르게 padding의 값이 영역의 너비나 높이에 영향을 준 다는 점이 큰 차이점이라고 말할 수 있다.
<style>
.box{padding:0 20px; width:200px; height:200px; background:skyblue;}
</style>
<body>
<div class="box"></div>
</body>
위의 예시에서 확인할 수 있듯 padding값은 영역의 너비, 높이에 영향을 끼친다.
2. padding 값
padding은 margin과 마찬가지로
padding-top, padding-right, padding-bottom, padding-left 등의 세부 속성으로 사용할 수 있고,
padding: 0(위) 0(오른쪽) 0(아래) 0(왼쪽) 과 같이 축약형으로도 사용할 수 있다.
(축약형의 경우 위, 오른쪽, 아래, 왼쪽의 순서로 값을 적용한다.)
반응형
'Frontend > CSS' 카테고리의 다른 글
| [css 속성] user-select (텍스트 선택, 드래그 설정) (0) | 2020.10.12 |
|---|---|
| [css 속성] border (0) | 2020.08.25 |
| [css 속성] margin (0) | 2020.08.22 |
| [css 속성] box-sizing (0) | 2020.08.22 |
| [css 응용] 이미지 세로 중앙 정렬 (0) | 2020.05.23 |