CSS button 按钮大小设置三种方法

button设置按钮大小的三种方法

CSS中,可以通过多种方法设置button按钮的尺寸大小,这里介绍其中的三种,如下:

  1. 使用width和height属性设置;
  2. 使用font-size属性设置;
  3. 使用padding内边距属性设置。

设置按钮大小三种方法的实例代码,及在线编辑器

下面的实例中,通过三个button的尺寸设置,展示了上述三种设置按钮大小的方法,及三种方法所展示的层叠样式效果,以及区别:

<button id='b1'>按钮1</button><br><br>
<button id='b2'>按钮2</button><br><br>
<button id='b3'>按钮3</button>

<style>
  #b1{width:100px;height:50px;}
  #b2{font-size:2.5em;}
  #b3{padding:5%;}
</style>

全栈前端 / CSS教程 :



























Copyright © 2022-2024 笨鸟工具 x1y1z1.com All Rights Reserved.