数据结构
网络
关系型数据库管理系统
操作系统
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 编程
C++
C#
MongoDB
MySQL
Javascript
PHP
物理学
化学
生物学
数学
英语
经济学
心理学
社会学
时尚研究
法律研究使用 CSS 更改按钮的内边距
按钮内边距，在 Web 开发中使用，指的是按钮文本或图标与其边缘之间存在的间隙。使用 CSS（层叠样式表），您可以更改按钮的内边距。
CSS padding 属性用于向元素的边框及其周围区域添加空间。内边距至关重要，因为它是最靠近 CSS 盒模型内部的部分，会影响元素的间距。除了内边距外，CSS 盒模型还包含元素的边距和边框样式。
CSS 内边距对于实现设计美观和功能之间的理想平衡至关重要，这对于创建用户友好的网站至关重要，因为两者缺一不可。这就是 CSS 内边距的作用所在。
使用 CSS 为按钮添加内边距
在网站上的按钮元素中添加号召性用语时，应始终有效地对其进行填充，以便它们足够突出，以便用户点击。您可以像添加文本元素一样，为按钮添加内边距。
语法
以下是 HTML 按钮的语法
<button>...</button&>
示例
让我们看下面的例子，我们将更改按钮的内边距。
<!DOCTYPE html>
<html>
<head>
<style>
body {
background-color: #D5F5E3;
text-align: center;
}
.tp {
background-color: #DE3163;
border: none;
color: #17202A;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 20px;
margin: 15px 20px;
cursor: pointer;
}
.x1 {
padding: 3px 10px;
}
.x2 {
padding: 10px 15px;
}
</style>
</head>
<body>
<button class="tp x1">Button 1</button>
<button class="tp x2">Button 2</button>
</body>
</html>
当我们运行以上代码时，它将生成一个输出，该输出包含在网页上显示的不同内边距的两个按钮。
示例
考虑另一种情况，我们将看到填充按钮和普通按钮之间的区别。
<!DOCTYPE html>
<html>
<head>
<style>
body {
background-color: #E8DAEF;
text-align: center;
font-family: verdana;
color: #DE3163;
}
.tp {
background-color: #F9E79F;
border: none;
color: #17202A;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 20px;
margin: 15px 20px;
cursor: pointer;
}
.x2 {
padding: 10px 15px;
}
</style>
</head>
<body>
<button>Button 1</button> : Normal Button <br>
<br>
<button class="tp x2">Button 2</button> : Padded Button <br>
</body>
</html>
运行以上代码后，输出窗口将弹出，显示两个按钮：一个是在网页上的普通按钮，另一个是填充的按钮。
更新于: 2024年1月8日
4K+ 次查看
广告