資料結構
網路
關係資料庫管理系統 (RDBMS)
作業系統
Java
MS Excel
iOS
HTML
CSS
Android
Python
C語言程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP
物理
化學
生物
數學
英語
經濟學
心理學
社會研究
時尚研究
法律研究CSS 中的 padding 簡寫屬性
CSS 中的 padding 屬性允許您設定 padding-top、padding-right、padding-bottom、padding-left 的內邊距。它是一個簡寫屬性。
例如
padding:10px 5px 7px 10px;
這裡：
上內邊距為 10px
右內邊距為 5px
下內邊距為 7px
左內邊距為 10px
語法
CSS padding 屬性的語法如下：
Selector {
padding: /*value*/
}
值可以是：
padding-top
padding-right
padding-bottom
padding-left
以下示例說明了 CSS padding 簡寫屬性：
包含所有值的 padding 屬性
包含所有值的 padding 屬性設定頂部、右側、底部和左側屬性的值：
padding: 35px 70px 50px 40px;
示例
讓我們看看這個例子：
<!DOCTYPE html>
<html>
<head>
<style>
p.demo {
border: 2px solid blue;
padding: 35px 70px 50px 40px;
}
</style>
</head>
<body>
<h1>Demo Heading</h1>
<p>This is a demo text.</p>
<p class="demo">This is another demo text.</p>
<p>Another demo text</p>
<h2>Demo Heading2</h2>
<p>Demo text</p>
</body>
</html>
包含三個值的 padding 屬性
padding 屬性包含三個值。上內邊距為 35px。左和右屬性為 70px。下內邊距為 50px：
padding: 35px 70px 50px;
示例
讓我們看看這個例子：
<!DOCTYPE html>
<html>
<head>
<style>
p.demo {
border: 2px solid blue;
padding: 35px 70px 50px;
}
</style>
</head>
<body>
<h1>Demo Heading</h1>
<p>This is a demo text.</p>
<p class="demo">This is another demo text.</p>
<p>Another demo text</p>
<h2>Demo Heading2</h2>
<p>Demo text</p>
</body>
</html>
包含兩個值的 padding 屬性
padding 屬性包含兩個值，即頂部和底部邊距為 2em。左和右屬性為 3em：
padding: 2em 3em;
示例
讓我們看看這個例子：
<!DOCTYPE html>
<html>
<head>
<style>
div {
height: 150px;
width: 300px;
padding: 5% 10% 20% 5%;
background-image: url("https://tutorialspoint.tw/images/home_tensor_flow.png");
text-align: center;
font-weight: bold;
font-size: 1.2em;
box-sizing: border-box;
}
div > div {
border-radius: 80px;
padding: 2em 3em;
box-shadow: 0 0 4px 0.8px black;
}
</style>
</head>
<body>
<div>Learn TensorFlow
<div>TensorFlow is an open source machine learning framework for all developers.</div>
</div>
</body>
</html>
包含單個值的 padding 屬性
padding 屬性包含單個值，即所有 padding 屬性都設定為 2em：
padding: 2em;
示例
讓我們看看這個例子：
<!DOCTYPE html>
<html>
<head>
<style>
div {
height: 150px;
width: 100px;
padding: 5% 1%;
background-color: papayawhip;
border-radius: 5%;
box-sizing: border-box;
}
div > div {
width: 50px;
height: 50px;
border-radius: 50%;
padding: 2em;
box-shadow: 0 0 9px 1px black;
}
span {
padding: 10px;
}
</style>
</head>
<body>
<div>
<div></div>
<span><i>button</i></span>
</div>
</body>
</html>
更新於：2024年1月2日
瀏覽量：173
廣告