padding

요소의 '내부(안) 여백'을 지정

 

속성 값

값	의미	기본값
단위	px, em, cm 등 단위로 지정	0
%	부모 요소의 너비에 대한 비율로 지정

 

 

사용법

padding : 위 우 아래 좌;
padding : 위 [좌, 우] 아래;
padding : [위, 아래] [좌,우];
padding : [위, 아래, 좌, 우];

.box{
    padding: 10px 20px 30px 40px;
    padding: 10px 20px 40px;
    padding: 10px 40px;
    padding: 10px;
 }

 

 

크기 증가

추가된 padding 값만큼 요소의 크기가 커지는 현상

<div>
  Hello world!
</div>

div {
  width: 100px;
  height: 100px;
  background : tomato;
}

원래 크기

 

padding값을 추가하면 가로,세로 길이가 길어진다.

div {
  width: 100px;
  height: 100px;
  background : tomato;
  padding : 20px;
}

더 커진 박스

왼쪽, 오른쪽 각각 20px씩 100+20+20 되어서 가로 총 140px이 되었다.

또한 위, 아래 각각 20px씩 100+20+20 되어서 세로 총 140px이 되었다.

 

 

 

크기가 커지지 않도록 계산하기!

다음과 같이 수정을 해야지 가로, 세로 각각 총 100px이 된다.

div {
  width: 60px;
  height: 80px;
  background : tomato;
  padding : 10px 20px
}

 

 

 

크기가 커지지 않도록 자동계산하기!

직접 계산하지 않고 box-sizing:border-box;를 추가한다.

div {
  width: 100px;
  height: 100px;
  background : tomato;
  padding : 10px 20px;
  box-sizing : border-box;
}

box-sizing으로 패딩값 설정

이뜻은, 가로사이즈 100px, 세로사이즈 100px안에서 padding값을 각각 10px 20px씩하겠다라는 뜻이다.

박스사이즈가 커지지 않는다.