CSS Padding

CSS Padding

padding속성은 정의 된 테두리 내에서 요소 내용 주위에 공간을 생성하는 데 사용됩니다.

• padding-top
• padding-right
• padding-bottom
• padding-left

div {
  padding-top: 50px;
  padding-right: 30px;
  padding-bottom: 50px;
  padding-left: 80px;
}

div {
  padding: 25px 50px 75px 100px;
}

 

 

패딩 및 요소 너비

CSS width속성은 요소 내용 영역의 너비를 지정합니다. 내용 영역은 요소의 패딩, 테두리 및 여백 내부의 부분입니다 ( 상자 모델 ).

따라서 요소에 지정된 너비가 있으면 해당 요소에 추가 된 패딩이 요소의 총 너비에 추가됩니다.

div {
  width: 300px;
  padding: 25px;
}

<div> 요소는 너비가 300px입니다. 
그러나 <div> 요소의 실제 너비는 350px (300px + 25px의 왼쪽 여백 + 25px의 오른쪽 여백)입니다.

 

패딩 양에 상관없이 너비를 300px로 유지하려면이 box-sizing속성을 사용할 수 있습니다 . 이로 인해 요소의 너비가 유지됩니다. 패딩을 늘리면 사용 가능한 컨텐츠 공간이 줄어 듭니다.

div {
  width: 300px;
  padding: 25px;
  box-sizing: border-box;
}

패딩 크기에 관계없이 상자 크기 조정 속성을 사용하여 너비를 300px로 유지하십시오.