ホームページ  >  記事  >  ウェブフロントエンド  >  CSSにおけるパディングとは何を意味しますか

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

青灯夜游
青灯夜游オリジナル
2021-05-17 17:49:3729900ブラウズ

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におけるパディングとは何を意味しますか

学習ビデオ共有: css ビデオ チュートリアル

以上がCSSにおけるパディングとは何を意味しますかの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

声明:
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。