↩ プログラミング言語 Web関連 css3 CSS パディング (内側のマージン)

CSS パディング (内側のマージン)

 
 
パディングとは、要素のコンテンツ領域と境界線の間の領域を指し、外側のマージンとは異なり、内側のマージンは background プロパティの影響を受けます。次のプロパティを使用して、要素のパディングのサイズを設定できます。

 

  • padding-top: 要素のコンテンツ領域の上にパディングを設定します。
  • padding-right: 要素のコンテンツ領域の右側に内側のマージンを設定します。
  • padding-bottom: 要素のコンテンツ領域の下にパディングを設定します。
  • padding-left: 要素のコンテンツ領域の左側に内側のマージンを設定します。
  • padding: padding 属性の省略形で、上下左右の 4 方向に同時にパディングを設定できます。

上記のプロパティのオプションの値を以下の表に示します。

価値 例証する
length px、cm、その他の単位で特定の値を使用して、要素の内側の余白のサイズを定義します。負の値は指定できません。デフォルト値は 0px です。
% 親要素の幅のパーセンテージに基づいてパディングを定義します。負の値は指定できません
inherit 親要素から padding プロパティの値を継承する
コンテンツ 表示

全方向のパディングを定義する

padding-top、padding-bottom、padding-left、および padding-right プロパティを使用して、それぞれ上、下、左、および右の 4 方向で要素の内側マージンを設定できます。

[例] 要素の内余白を上下左右の 4 方向に定義する:

 <!DOCTYPE html>
<html>
<head>
    <style>
        div {
            padding-top: 10px;
            padding-bottom: 2em;
            padding-left: 1cm;
            padding-right: 3ex;
            border: 1px solid red;
            background: #CFC;
        }
    </style>
</head>
<body>
    <div>
        padding-top: 10px;<br>
        padding-bottom: 2em;<br>
        padding-left: 1cm;<br>
        padding-right: 3ex;
    </div>
</body>
</html>

実行結果は次の図のとおりです。

図: padding-top、padding-bottom、padding-left、padding-right プロパティのデモ
図: padding-top、padding-bottom、padding-left、padding-right プロパティのデモ

パディングの短縮形

padding 属性は、他の 4 つの属性の省略形であり、実際の開発で最も使用する省略属性でもあります。 margin 属性と同様に、paddiing 属性も 1 ~ 4 個のパラメーターを受け入れることができます (パラメーターはスペースで区切られます)。

  • 4 つのパラメーターが指定されている場合、要素の 4 方向のパディングは、上、右、下、左の順に設定されます。
  • 3 つのパラメーターが指定されている場合、最初のパラメーターは要素の上のパディングを設定するために使用され、2 番目のパラメーターは要素の左右方向のパディングを設定するために使用され、3 番目のパラメーターは要素を設定するために使用されます。要素の下のパディング。
  • 2 つのパラメーターが指定されている場合、最初のパラメーターは要素の上下方向のパディングを設定するために使用され、2 番目のパラメーターは要素の左右方向のパディングを設定するために使用されます。
  • パラメータが 1 つだけ指定されている場合、このパラメータは要素の余白に対して同時に 4 方向に作用します。

[例] padding 属性を使用して、要素のパディングを設定します。

 <!DOCTYPE html>
<html>
<head>
    <style>
        div {
            padding: 10px 3ex 2em 1cm;
            border: 1px solid red;
            background: #CFC;
        }
    </style>
</head>
<body>
    <div>
        パディング：10ピクセル3ex 2em 1センチメートル;
    </div>
</body>
</html>

実行結果は次の図のとおりです。

図: パディング属性のデモ
図: パディング属性のデモ
 

「CSS パディング (内側のマージン)」についてわかりやすく解説！絶対に観るべきベスト2動画

【HTML入門講座】marginとpaddingの違いをマスターする！2種類の余白指定。
https://www.youtube-nocookie.com/watch?v=Zgmrmg0XcSg&pp=ygUxQ1NTIOODkeODh-OCo-ODs-OCsCAo5YaF5YG044Gu44Oe44O844K444OzKSZobD1KQQ%3D%3D
パディングとマージンの使い分け | STUDIO Design Tips
https://www.youtube-nocookie.com/watch?v=C9UaLTdRMt8&pp=ygUxQ1NTIOODkeODh-OCo-ODs-OCsCAo5YaF5YG044Gu44Oe44O844K444OzKSZobD1KQQ%3D%3D
 
 
パディングとは、要素のコンテンツ領域と境界線の間の領域を指し、外側のマージンとは異なり、内側のマージンは background プロパティの影響を受けます。次のプロパティを使用して、要素のパディングのサイズを設定できます。

 

  • padding-top: 要素のコンテンツ領域の上にパディングを設定します。
  • padding-right: 要素のコンテンツ領域の右側に内側のマージンを設定します。
  • padding-bottom: 要素のコンテンツ領域の下にパディングを設定します。
  • padding-left: 要素のコンテンツ領域の左側に内側のマージンを設定します。
  • padding: padding 属性の省略形で、上下左右の 4 方向に同時にパディングを設定できます。

上記のプロパティのオプションの値を以下の表に示します。

価値 例証する
length px、cm、その他の単位で特定の値を使用して、要素の内側の余白のサイズを定義します。負の値は指定できません。デフォルト値は 0px です。
% 親要素の幅のパーセンテージに基づいてパディングを定義します。負の値は指定できません
inherit 親要素から padding プロパティの値を継承する
コンテンツ 表示

全方向のパディングを定義する

padding-top、padding-bottom、padding-left、および padding-right プロパティを使用して、それぞれ上、下、左、および右の 4 方向で要素の内側マージンを設定できます。

[例] 要素の内余白を上下左右の 4 方向に定義する:

 <!DOCTYPE html>
<html>
<head>
    <style>
        div {
            padding-top: 10px;
            padding-bottom: 2em;
            padding-left: 1cm;
            padding-right: 3ex;
            border: 1px solid red;
            background: #CFC;
        }
    </style>
</head>
<body>
    <div>
        padding-top: 10px;<br>
        padding-bottom: 2em;<br>
        padding-left: 1cm;<br>
        padding-right: 3ex;
    </div>
</body>
</html>

実行結果は次の図のとおりです。

図: padding-top、padding-bottom、padding-left、padding-right プロパティのデモ
図: padding-top、padding-bottom、padding-left、padding-right プロパティのデモ

パディングの短縮形

padding 属性は、他の 4 つの属性の省略形であり、実際の開発で最も使用する省略属性でもあります。 margin 属性と同様に、paddiing 属性も 1 ~ 4 個のパラメーターを受け入れることができます (パラメーターはスペースで区切られます)。

  • 4 つのパラメーターが指定されている場合、要素の 4 方向のパディングは、上、右、下、左の順に設定されます。
  • 3 つのパラメーターが指定されている場合、最初のパラメーターは要素の上のパディングを設定するために使用され、2 番目のパラメーターは要素の左右方向のパディングを設定するために使用され、3 番目のパラメーターは要素を設定するために使用されます。要素の下のパディング。
  • 2 つのパラメーターが指定されている場合、最初のパラメーターは要素の上下方向のパディングを設定するために使用され、2 番目のパラメーターは要素の左右方向のパディングを設定するために使用されます。
  • パラメータが 1 つだけ指定されている場合、このパラメータは要素の余白に対して同時に 4 方向に作用します。

[例] padding 属性を使用して、要素のパディングを設定します。

 <!DOCTYPE html>
<html>
<head>
    <style>
        div {
            padding: 10px 3ex 2em 1cm;
            border: 1px solid red;
            background: #CFC;
        }
    </style>
</head>
<body>
    <div>
        パディング：10ピクセル3ex 2em 1センチメートル;
    </div>
</body>
</html>

実行結果は次の図のとおりです。

図: パディング属性のデモ
図: パディング属性のデモ
 

「CSS パディング (内側のマージン)」についてわかりやすく解説！絶対に観るべきベスト2動画

【HTML入門講座】marginとpaddingの違いをマスターする！2種類の余白指定。
https://www.youtube-nocookie.com/watch?v=Zgmrmg0XcSg&pp=ygUxQ1NTIOODkeODh-OCo-ODs-OCsCAo5YaF5YG044Gu44Oe44O844K444OzKSZobD1KQQ%3D%3D
パディングとマージンの使い分け | STUDIO Design Tips
https://www.youtube-nocookie.com/watch?v=C9UaLTdRMt8&pp=ygUxQ1NTIOODkeODh-OCo-ODs-OCsCAo5YaF5YG044Gu44Oe44O844K444OzKSZobD1KQQ%3D%3D

最新記事一覧

関連記事一覧