CSSにおけるパディングとは何を意味しますか-CSSチュートリアル-php.cn

CSSにおけるパディングとは何を意味しますか

青灯夜游

リリース： 2023-01-06 11:13:43

オリジナル

29913 人が閲覧しました

CSS では、パディングとは「塗りつぶし」または「パディング」を意味し、要素の境界線と要素の内容の間のスペース、つまり要素のパディングを定義するために使用されます。 padding は、要素上のすべてのパディングの幅を設定したり、各側のパディングの幅を設定したりできる省略表現のプロパティです。

CSSにおけるパディングとは何を意味しますか

このチュートリアルの動作環境: Windows 7 システム、CSS3&&HTML5 バージョン、Dell G3 コンピューター。

CSSにおけるパディングとは何を意味しますか

CSS パディング

CSS パディングは、要素の境界線と要素のコンテンツスペースの間のスペースを定義する短縮プロパティです。つまり、要素のパディングです。

CSSにおけるパディングとは何を意味しますか

要素のパディングがクリアされると、解放された領域は要素の背景色で塗りつぶされます。

padding 属性を単独で使用して、上下左右のパディングを変更します。

説明:

この短縮属性は、要素のすべてのパディングの幅を設定するか、各側のパディングの幅を設定します。インラインの非置換要素に設定されたパディングは、行の高さの計算には影響しません。したがって、要素にパディングと背景の両方がある場合、視覚的に他の行に拡張され、他のコンテンツと重なる可能性があります。要素の背景はパディング全体に広がります。負のマージン値は許可されません。

Padding 属性には 1 ～ 4 つの値を指定できます。

padding:25px 50px 75px 100px;

ログイン後にコピー

上部のパディングは 25px
右側のパディングは 50px
下部のパディングは 50px 75px
左のパディングは 100px

padding:25px 50px 75px;

ログイン後にコピー

上部のパディングは 25px
左右のパディングは 50px
下部のパディングは 75px

padding:25px 50px;

ログイン後にコピー

上下のパディングは 25px
左右のパディングは 50px

padding:25px;

ログイン後にコピー

すべてのパディングは 25px

例 :

<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">
这个表格单元的每个边拥有相等的内边距。
</td>
</tr>
</table>
<br />
<table border="1">
<tr>
<td class="test2">
这个表格单元的上和下内边距是 0.5cm，左和右内边距是 2.5cm。
</td>
</tr>
</table>
</body>

</html>

ログイン後にコピー

CSSにおけるパディングとは何を意味しますか