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

 

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

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

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

 

 

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

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

예제에서 보는 것과 같이,

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

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

 

 

 

버튼 크기 조정하기 (padding)

padding: 10px 30px;

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

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