[html][css] padding 내부 여백/ 크기 증가/ 크기 증가 안되게 계산 하는법

padding

요소의 내부 여백을 지정

 

% : 부모 요소의 너비에 대한 비율로 지정됨

 

padding: 위 우 아래 좌;

padding: 위 (좌,우) 아래;

padding: (위,아래) (좌,우);

padding: (위 아래 좌 우);

padding-top / bottom/ right / left 개별 속성도 가능

 

 

---

크기 증가

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

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

padding을 넣기 후 -> 전

크기가 커졌다.

안쪽 여백을 사방으로 주었기 때문이다.

 

 

크기가 이렇게 커지게 되면 매번 계산을 해야하므로 자동으로 계산되는 것은

box-sizing: border-box; 속성을 추가한다.

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

그러면 이렇게 크기는 커지지 않고 글자위치가 바꼈다.

그 뜻은 안으로 padding이 들어가서 텍스트 박스의 위치가 바뀐 것이다.