CSS
 Computer >> コンピューター >  >> プログラミング >> CSS

CSSのpaddingプロパティで要素の左右上下のパディング（内側の余白）を設定する方法

CSSのpaddingプロパティを使用すると、要素の左・右・上・下すべてのパディング（内側の余白）をまとめて設定できます。境界線（border）の内側にスペースを作りたい場合に非常に便利なプロパティです。

paddingプロパティの指定方法

paddingプロパティには、値の数に応じて以下のような指定方法があります。

  • 値が1つの場合：上下左右すべてに同じパディングが適用されます（例：padding: 25px;）
  • 値が2つの場合：1つ目が上下、2つ目が左右に適用されます（例：padding: 20px 4%;）
  • 値が3つの場合：1つ目が上、2つ目が左右、3つ目が下に適用されます（例：padding: 15px 3% 10px;）
  • 値が4つの場合：上・右・下・左の順（時計回り）で個別に適用されます

また、pxなどの絶対単位だけでなく、親要素やドキュメントの幅に対する割合（%）で指定することも可能です。

サンプルコード

以下のコードを実行して、paddingプロパティの動作を確認してみましょう。

<html>
   <head>
   </head>
   <body>
      <p style = "padding: 25px; border:2px solid orange;">
         これは最初の段落です。
      </p>
      <p style = "padding:20px 4%; border:2px solid red;">
         これは別の段落です。
      </p>
      <p style = "padding: 15px 3% 10px; border:1px solid maroon;">
         上のパディングは15px、左右のパディングはドキュメント全体の幅の3%、
         下のパディングは10pxになります。
      </p>
   </body>
</html>

コードの解説

  • 1つ目の段落：padding: 25px; を指定しているため、上下左右すべてに25pxの余白が設定され、オレンジ色の枠線で囲まれて表示されます。
  • 2つ目の段落：padding: 20px 4%; を指定しているため、上下に20px、左右にはドキュメント全体の幅の4%の余白が設定されます。
  • 3つ目の段落：padding: 15px 3% 10px; を指定しているため、上のパディングは15px、左右はドキュメント幅の3%、下のパディングは10pxになります。

このようにpaddingプロパティを使いこなすことで、要素内のテキストと境界線との間隔を柔軟に調整でき、読みやすく洗練されたレイアウトを実現できます。

  1. iOSアプリでビューの上下にボーダー（境界線）を追加する方法【Swift】

    この記事では、iOSアプリのビューの上下にボーダー（境界線）を追加する方法を解説します。サンプルとして用意したビューに対して、実際にコードを書きながら上下の境界線を実装していきましょう。手順1：プロジェクトを作成するXcodeを開き、「File」→「New」→「Project」から「Single View Application」を選択して新規プロジェクトを作成します。プロジェクト名は「AddBorderTopAndBottom」としましょう。手順2：Storyboardにビューを配置するMain.storyboardを開き、以下の画像のようにUIViewを画面中央に配置します。手順3：アウト

  2. 【CSS入門】floatプロパティで要素を左右に配置する方法

    CSSのfloatプロパティとは？CSSのfloatプロパティは、ボックスやコンテンツの位置指定・フォーマットを行うためのプロパティです。これを利用すると、HTML要素をページの左側または右側に寄せて配置できます。floatプロパティに指定できる主な値は以下の通りです。left … 要素を左に浮動させるright … 要素を右に浮動させるnone … 浮動を解除する（初期値）それでは、実際のサンプルコードでfloatによる左右配置の方法を確認していきましょう。例1：floatで要素を左右に振り分ける次の例では、映画館のスクリーンと座席をイメージしたレイアウトを作成し、floatプロパティによっ