[HTML/CSS] 버튼 크기 조정하기 (padding)

 

버튼의 크기를 지정하기 위해서

width, height  속성을 사용할 수도 있지만,

padding 속성을 사용할 수도 있습니다.

 

 

버튼 크기 조정하기 (width, height)

먼저 width, height로 버튼의 크기를 조정해보았습니다.

<button>기본 버튼</button>
<button class='my_btn'>큰 버튼</button>
<button class='my_btn'>내용이 길어지면</button>

.my_btn {
  background-color: skyblue;
  color: white;
  border: none;
  
  width: 100px;
  height: 30px;
}

예제에서 보는 것과 같이,

width, height를 고정하여 버튼의 크기를 지정하면

버튼 안에 들어가는 내용이 길어지면, 내용이 버튼의 크기를 벗어나게 됩니다.

 

 

 

버튼 크기 조정하기 (padding)

<button>기본 버튼</button>
<button class='my_btn'>큰 버튼</button>
<button class='my_btn'>내용이 길어져도 괜찮아요</button>

.my_btn {
  background-color: skyblue;
  color: white;
  border: none;
  
  padding: 10px 30px;
}

padding: 10px 30px;

버튼의 위 아래에는 10px, 왼쪽 오른쪽에는 30px의 padding을 추가하였습니다.

버튼 안의 내용이 늘어나더라도, 버튼이 깨지지 않고 확장됩니다.