CSS padding: 안쪽 여백 단축 속성
CSS padding
속성은 요소의 네 방향 안쪽 여백(패딩)을 동시에 설정합니다.
#target {
padding: 10px;
/* padding: 5% 0; */
/* padding: 10px 30px 50px; */
/* padding: 50px 30px 10px 10px; */
}
#target {
background: beige;
border: 8px solid aquamarine;
}
.inside {
background: white;
border: 2px dashed darkseagreen;
height: 40px;
}
<div id="target">
<div class="inside"></div>
</div>
불러오는 중...
구문
/* 모든 방향 */
padding: 10px;
/* 위+아래 왼쪽+오른쪽 */
padding: 4px 10%;
/* 위 왼쪽+오른쪽 아래 */
padding: 0 auto 50%;
/* 위 오른쪽 아래 왼쪽 */
padding: 2.4em 3em 3em 3em;
/* 전역 값 */
padding: inherit;
padding: initial;
padding: revert;
padding: revert-layer;
padding: unset;
padding
속성에는 한 개에서 네 개까지의 값을 사용합니다. 각각의 값은 <length>
또는 <percentage>
입니다. 0보다 작은 값은 지정할 수 없습니다.
- 값을 한 개 지정하면 네 방향 여백 모두에 적용됩니다.
- 값을 두 개 지정하면 첫 번째 값은 위와 아래, 두 번째 값은 왼쪽과 오른쪽 여백에 적용됩니다.
- 값을 세 개 지정하면 첫 번째 값은 위, 두 번째 값은 왼쪽과 오른쪽, 세 번째 값은 아래 여백에 적용됩니다.
- 값을 네 개 지정하면 각각 위, 오른쪽, 아래, 왼쪽 여백에 적용됩니다. (시계 방향)
값
<length>
안쪽 여백의 크기를 고정된 수치로 지정합니다.
<percentage>
안쪽 여백의 크기를 컨테이닝 블록의 인라인 크기(가로쓰기에서는 너비)에 대한 백분율로 지정합니다.
명세
브라우저 호환성
데스크톱 | 모바일 | ||||||
---|---|---|---|---|---|---|---|
iOS | Android | ||||||
Safari | Chrome | Firefox | Safari | Chrome | Firefox | Samsung Internet | |
padding |
같이 보기
- 바깥 여백:
margin
- CSS 기본 박스 모델 소개