CSS-マージン

_margin_プロパティは、HTML要素の周囲のスペースを定義します。負の値を使用してコンテンツをオーバーラップさせることができます。

marginプロパティの値は、子要素に継承されません。隣接する垂直方向の余白（上下の余白）は互いに折りたたまれ、ブロック間の距離は余白の合計ではなく、2つの余白のうち大きい方、または両方が1つの余白と同じサイズになることを忘れないでください等しい。

要素のマージンを設定するには、次のプロパティがあります。

margin は、1つの宣言でマージンプロパティを設定するための簡略プロパティを指定します。
margin-bottom は、要素の下マージンを指定します。
margin-top は、要素の上マージンを指定します。
margin-left は、要素の左マージンを指定します。
margin-right は、要素の右マージンを指定します。

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

マージンプロパティ

マージンプロパティを使用すると、1つの宣言で4つのマージンのすべてのプロパティを設定できます。ここに段落の周りにマージンを設定する構文があります-

ここに例があります-

<html>
   <head>
   </head>

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

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

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

      <p style = "margin: 10px 2% -10px auto; border:1px solid black;">
         top margin will be 10px, right margin will be 2% of the total
         width of the document, bottom margin will be -10px, left margin
         will be set by the browser
      </p>
   </body>
</html>

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

margin-bottomプロパティ

margin-bottomプロパティを使用すると、要素の下マージンを設定できます。長さ、％、またはautoの値を持つことができます。

ここに例があります-

<html>
   <head>
   </head>

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

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

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

margin-topプロパティ

margin-topプロパティを使用すると、要素の上マージンを設定できます。長さ、％、またはautoの値を持つことができます。

ここに例があります-

<html>
   <head>
   </head>

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

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

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

margin-leftプロパティ

margin-leftプロパティを使用すると、要素の左マージンを設定できます。長さ、％、またはautoの値を持つことができます。

ここに例があります-

<html>
   <head>
   </head>

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

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

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

margin-rightプロパティ

margin-rightプロパティを使用すると、要素の右マージンを設定できます。長さ、％、またはautoの値を持つことができます。

ここに例があります-

<html>
   <head>
   </head>

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

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

Css-margins

目次

CSS-マージン

マージンプロパティ

margin-bottomプロパティ

margin-topプロパティ

margin-leftプロパティ

margin-rightプロパティ