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

CSSのmargin-bottomプロパティの使い方！下マージンの設定方法を徹底解説

CSSの margin-bottom プロパティは、要素の下側のマージン（外側の余白）を指定するために使用します。隣接する要素との間隔を調整したい場合に非常に便利なプロパティです。

margin-bottomで指定できる値

margin-bottomには、以下の3種類の値を指定できます。

  • 長さ（length）：px、em、remなどの単位で固定値を指定
  • パーセント（%）：親要素の幅に対する割合で指定
  • auto：自動計算による余白の設定

また、負の値（マイナスの値）も指定可能で、その場合は要素同士が重なり合うように配置されます。

実際のコード例

以下のコードでは、1つ目の段落に「20px」、2つ目の段落に「20%」のマージンを指定しています。それぞれ表示結果の違いを確認してみましょう。

<html>
   <head>
   </head>
   <body>
      <p style = "margin-bottom: 20px; border:2px solid red;">
         下マージンを20pxに指定した段落です。
      </p>
      <p style = "margin-top: 20%; border:2px solid green;">
         上マージンを親要素の幅に対して20%で指定した段落です。
      </p>
   </body>
</html>

ポイント解説

サンプルコード内の2つ目の段落では比較用として margin-top を使っていますが、考え方は同じです。パーセント指定の場合、縦方向のマージンであっても親要素の「幅」を基準として計算される点に注意しましょう。

さらに、上下に隣接する要素のマージンは、大きい方の値だけが適用される「マージンの相殺（margin collapsing）」という仕組みが働くため、意図した間隔にならない場合はこの挙動を確認するとよいでしょう。

  1. CSSのtransform-originプロパティの使い方を解説！変形の基準点を変更する方法

    transform-originプロパティとは？ CSSのtransform-originプロパティを使うと、transformで変形（回転・拡大縮小・傾斜など）される要素の基準点（原点）を自由に変更できます。 デフォルトでは要素の中央（50% 50%）が基準点に設定されていますが、このプロパティを指定することで、回転やスケール変換の起点を要素の任意の位置に移動させることが可能です。 値の指定方法は主に以下のとおりです。 キーワード： top、bottom、left、right、center など パーセンテージ： 30% 40% のように要素のサイズに対する割合で指定 長さ（px、em な

  2. CSSのtransformプロパティで要素を変形させる方法

    CSSのtransformプロパティは、要素に対して2Dまたは3Dの変形を適用するために使用されます。回転（rotate）、拡大縮小（scale）、移動（translate）、傾斜（skew）などの変換を組み合わせることで、静的なページに動きや立体感を加え、より視覚的に魅力的なデザインを実現できます。 transformプロパティの基本的な使い方 transformプロパティには、主に以下のような変換関数を指定できます。 rotate()：要素を指定した角度で回転させます scale()：要素のサイズを拡大・縮小します translate()：要素をX軸・Y軸方向に移動させます skew()