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

CSSのmargin-bottomプロパティで要素の下マージンを設定する方法

margin-bottomプロパティとは

CSSの margin-bottomプロパティは、要素の下側にあるマージン（外側の余白）を設定するために使用します。隣接する要素との間隔を調整したいときなどに活用できる、ボックスモデルの基本となるプロパティです。

このプロパティには、次の3種類の値を指定できます。

  • length：px、em、remなどの単位で具体的なマージン幅を指定します
  • %：親要素の幅に対する割合でマージンを指定します
  • auto：ブラウザが自動的にマージンを計算します

なお、負の値も指定でき、その場合は要素同士が重なるようなレイアウトを作ることも可能です。

サンプルコード

以下のコードでは、margin-bottomを使って段落の下マージンを設定しています。1つ目の段落には40px、2つ目の段落には20%を指定し、それぞれ黄色の境界線を付けて余白の違いが分かりやすくなっています。

<html>
   <head>
   </head>
   <body>
      <p style = "margin-bottom: 40px; border:2px solid yellow;">
         Cricket crazy nation India!
      </p>
      <p style = "margin-bottom: 20%; border:2px solid yellow;">
         Cricket crazy nation Australia!
      </p>
   </body>
</html>

実行結果のポイント

上記のコードをブラウザで開くと、黄色い枠線を持つ2つの段落が縦に並んで表示され、それぞれの下に指定したサイズの余白が生まれます。

特に注意したいのは、「20%」のようにパーセンテージで指定した場合です。このときのマージン幅は、親要素の幅を基準として計算されるため、ウィンドウのサイズを変更すると余白の大きさも連動して変化します。固定幅にしたい場合はpxなどの単位を、レスポンシブなデザインにしたい場合は%を使うとよいでしょう。

  1. CSSのmargin-topプロパティで要素の上マージンを設定する方法

    CSSのmargin-topプロパティは、要素の上側のマージン（外側の余白）を指定するために使用します。値には、長さ（px、emなど）、パーセンテージ（%）、またはautoを指定できます。margin-topで使える主な値長さ（length）：px、em、remなどの単位で固定値を指定しますパーセンテージ（%）：親要素の幅に対する割合で指定しますauto：ブラウザが自動的にマージンを計算しますサンプルコード以下のコードを実行すると、margin-topを使って上マージンを設定した要素の表示を確認できます。<html>    <head>  

  2. HTMLで要素の名前を設定するには？name属性の使い方を解説

    HTMLでは、name属性を使うことで要素に名前を設定できます。この属性は、フォーム送信時のデータ識別やスクリプトからの要素参照など、さまざまな場面で重要な役割を果たします。name属性が使用できるHTML要素name属性は、以下のHTML要素に対して使用することができます。<button><fieldset><form><iframe><input><map><meta><object><output><param><select><textarea>