CSS 如何给添加内边距

在本文中，我们将介绍如何使用CSS给 <input type="button"> 元素添加内边距。内边距是指元素内容与边框之间的空白区域。通过添加内边距，您可以控制按钮元素的大小、布局和外观。

阅读更多：CSS 教程

CSS padding 属性

CSS的 padding 属性用于定义元素的内边距。它可以设置为以下值之一：

length (像素、厘米、毫米等)：如 padding: 10px;；
百分比：根据父元素的宽度来确定内边距的大小。如 padding: 5%;；
initial：将内边距设置为默认值；
inherit：继承父元素的内边距。

给按钮元素添加内边距的示例

下面是一个示例，展示如何使用CSS给 <input type="button"> 元素添加内边距：

<!DOCTYPE html>
<html>
<head>
<style>
button {
  padding: 10px 20px;
  background-color: #4CAF50;
  border: none;
  color: white;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  margin: 4px 2px;
  cursor: pointer;
}
</style>
</head>
<body>

<h2>添加内边距的按钮</h2>

<button>点击我</button>

</body>
</html>

在上面的示例中，我们使用 padding: 10px 20px; 给按钮元素添加了上下各10像素，左右各20像素的内边距。这样，按钮的内容与边框之间会有一定的空白区域。

您可以根据需要调整 padding 的值来改变按钮元素的内边距大小。使用 padding-top、padding-right、padding-bottom 和 padding-left 属性分别设置上、右、下和左四个方向的内边距。

总结

通过本文，我们学习了如何使用CSS给 <input type="button"> 元素添加内边距。内边距可以通过 padding 属性来设置，可以使用像素、百分比等单位。您可以根据需要调整内边距的数值来改变按钮元素的外观和布局。记住，选择适合您设计需要的内边距大小，可以让您的按钮元素看起来更加吸引人！