資料結構
網路
關係型資料庫管理系統
作業系統
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+ 次檢視
廣告