CSS-パディング

_padding_プロパティを使用すると、要素のコンテンツとその境界の間に表示されるスペースの量を指定できます-

この属性の値は、長さ、パーセンテージ、または_inherit_のいずれかでなければなりません。値が_inherit_の場合、親要素と同じパディングが設定されます。パーセンテージが使用される場合、パーセンテージは収容ボックスのパーセンテージです。

次のCSSプロパティを使用してリストを制御できます。また、次のプロパティを使用して、ボックスの両側にパディングの異なる値を設定することができます-

padding-bottom は、要素の下部のパディングを指定します。
padding-top は、要素の上部パディングを指定します。
padding-left は、要素の左パディングを指定します。
padding-right は、要素の右パディングを指定します。
padding は、前述のプロパティの省略形として機能します。

次に、これらのプロパティの使用方法を例とともに示します。

padding-bottomプロパティ

_padding-bottom_プロパティは、要素の下部のパディング（スペース）を設定します。これは、％の長さで値を取ることができます。

ここに例があります-

<html>
   <head>
   </head>

   <body>
      <p style = "padding-bottom: 15px; border:1px solid black;">
         This is a paragraph with a specified bottom padding
      </p>

      <p style = "padding-bottom: 5%; border:1px solid black;">
         This is another paragraph with a specified bottom padding in percent
      </p>
   </body>
</html>

それは次の結果を生成します-

padding-topプロパティ

_padding-top_プロパティは、要素の上部パディング（スペース）を設定します。これは、％の長さで値を取ることができます。

ここに例があります-

<html>
   <head>
   </head>

   <body>
      <p style = "padding-top: 15px; border:1px solid black;">
         This is a paragraph with a specified top padding
      </p>

      <p style = "padding-top: 5%; border:1px solid black;">
         This is another paragraph with a specified top padding in percent
      </p>
   </body>
</html>

それは次の結果を生成します-

padding-leftプロパティ

_padding-left_プロパティは、要素の左余白（スペース）を設定します。これは、％の長さで値を取ることができます。

ここに例があります-

<html>
   <head>
   </head>

   <body>
      <p style = "padding-left: 15px; border:1px solid black;">
         This is a paragraph with a specified left padding
      </p>

      <p style = "padding-left: 15%; border:1px solid black;">
         This is another paragraph with a specified left padding in percent
      </p>
   </body>
</html>

それは次の結果を生成します-

padding-rightプロパティ

_padding-right_プロパティは、要素の右パディング（スペース）を設定します。これは、％の長さで値を取ることができます。

ここに例があります-

<html>
   <head>
   </head>

   <body>
      <p style = "padding-right: 15px; border:1px solid black;">
         This is a paragraph with a specified right padding
      </p>

      <p style = "padding-right: 5%; border:1px solid black;">
         This is another paragraph with a specified right padding in percent
      </p>
   </body>
</html>

それは次の結果を生成します-

パディングプロパティ

_padding_プロパティは、要素の左、右、上、下のパディング（スペース）を設定します。これは、％の長さで値を取ることができます。

ここに例があります-

<html>
   <head>
   </head>

   <body>
      <p style = "padding: 15px; border:1px solid black;">
         all four padding will be 15px
      </p>

      <p style = "padding:10px 2%; border:1px solid black;">
         top and bottom padding will be 10px, left and right
         padding will be 2% of the total width of the document.
      </p>

      <p style = "padding: 10px 2% 10px; border:1px solid black;">
         top padding will be 10px, left and right padding will
         be 2% of the total width of the document, bottom padding will be 10px
      </p>

      <p style = "padding: 10px 2% 10px 10px; border:1px solid black;">
         top padding will be 10px, right padding will be 2% of
         the total width of the document, bottom padding and top padding will be 10px
      </p>
   </body>
</html>

それは次の結果を生成します-

Css-padding

目次

CSS-パディング

padding-bottomプロパティ

padding-topプロパティ

padding-leftプロパティ

padding-rightプロパティ

パディングプロパティ