CSS中如何使用padding屬性

發(fā)布時間：2022-02-22 10:40:57 來源：億速云閱讀：123 作者：小新欄目：開發(fā)技術(shù)

這篇文章主要介紹CSS中如何使用padding屬性，文中介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們一定要看完！

CSS 內(nèi)邊距
元素的內(nèi)邊距在邊框和內(nèi)容區(qū)之間。控制該區(qū)域最簡單的屬性是 padding 屬性。

CSS padding 屬性
CSS padding 屬性定義元素邊框與元素內(nèi)容之間的空白區(qū)域（內(nèi)邊距）。
CSS padding 屬性接受長度值或百分比值，但不允許使用負(fù)值。
例如，如果您希望所有 h2 元素的各邊都有 10 像素的內(nèi)邊距，只需要這樣：

h2 {padding: 10px;}

還可以按照上、右、下、左的順序分別設(shè)置各邊的內(nèi)邊距，各邊均可以使用不同的單位：

h2 {padding: 10px 0.25em 2ex 20%;}

單邊內(nèi)邊距屬性
也通過使用下面四個單獨(dú)的屬性，分別設(shè)置上、右、下、左內(nèi)邊距：
padding-top
padding-right
padding-bottom
padding-left
您也許已經(jīng)想到了，下面的規(guī)則實(shí)現(xiàn)的效果與上面的簡寫規(guī)則是完全相同的：

h2 {
    padding-top: 10px;
    padding-right: 0.25em;
    padding-bottom: 2ex;
    padding-left: 20%;
}

內(nèi)邊距的百分比數(shù)值
可以為元素的內(nèi)邊距設(shè)置百分?jǐn)?shù)值。百分?jǐn)?shù)值是相對于其父元素的 width 計(jì)算的。
這一點(diǎn)與外邊距一樣。所以，如果父元素的 width 改變，它們也會改變。
下面這條規(guī)則把段落的內(nèi)邊距設(shè)置為父元素 width 的 10%：

p {padding: 10%;}

例如：如果一個段落的父元素是 div 元素，那么它的內(nèi)邊距要根據(jù) div 的 width 計(jì)算。

<div style="width: 200px;">
    <p>This paragragh is contained within a DIV that has a width of 200 pixels.</p>
</div>

注意：上下內(nèi)邊距同左右邊距一樣，百分?jǐn)?shù)會相對于父元素寬度設(shè)置，而不是相對于高度。

所有內(nèi)邊距屬性在一個聲明中

<html>
<head>
<style type="text/css">
    td.test1 {padding: 1.5cm}
    td.test2 {padding: 0.5cm 2.5cm}
</style>
</head>
<body>
<table border="1">
    <tr>
        <td class="test1">這個表格單元的每個邊擁有相等的內(nèi)邊距，都是 1.5cm。</td>
    </tr>
</table>
<br />
<table border="1">
    <tr>
        <td class="test2">這個表格單元的上下內(nèi)邊距 0.5cm，左右內(nèi)邊距 2.5cm。</td>
    </tr>
</table>
</body>
</html>

注釋：使用簡寫屬性將所有的內(nèi)邊距屬性設(shè)置于一個聲明中，可以有一到四個值。

CSS 內(nèi)邊距屬性及描述
padding：簡寫屬性。作用是在一個聲明中設(shè)置元素的所內(nèi)邊距屬性。
padding-bottom：設(shè)置元素的下內(nèi)邊距。
padding-left：設(shè)置元素的左內(nèi)邊距。
padding-right：設(shè)置元素的右內(nèi)邊距。
padding-top：設(shè)置元素的上內(nèi)邊距。

以上是“CSS中如何使用padding屬性”這篇文章的所有內(nèi)容，感謝各位的閱讀！希望分享的內(nèi)容對大家有幫助，更多相關(guān)知識，歡迎關(guān)注億速云行業(yè)資訊頻道！

向AI問一下細(xì)節(jié)

CSS中如何使用padding屬性

猜你喜歡

最新資訊

相關(guān)推薦

相關(guān)標(biāo)簽