CSS3

プロパティ

margin

  編集:2022.07.05 by T.A.

mdn

マージン: 略式プロパティ。

名前 margin
margin-topの値と同じ {1,4}
初期値 0
適用対象 次に挙げるものを除く、すべての要素:
内部テーブル要素ルビ基底コンテナルビ注釈コンテナ
継承 されない
百分率 包含ブロックの論理横幅 を基準にする
算出値 キーワード auto あるいは算出された <length-percentage>
正準的順序 文法に従う
アニメーション型 算出値の型による

margin プロパティは、単独の宣言で[margin-top、margin-right、margin-bottom、margin-left]を設定する略式プロパティである。

一連の成分値は、マージンの各側を時計回りに設定する

<DIV style="width:100px; border:1px solid black;">
 <DIV style="margin:5px 10px 20px 30px; border:1px solid red;">DIV
 </DIV>
いくつかのマージン宣言をデモ:
body { margin: 2em }         /*  すべての側のマージンを 2em に設定する  */
body { margin: 1em 2em }     /*  上端, 下端 =1em, 右端, 左端 =2em  */
body { margin: 1em 2em 3em } /*  上端=1em, 右端=2em, 下端=3em, 左端=2em  */
関連

inset


テスト
HTML:

ここに表示
HTML:

ここに表示
スクリプト:


スクリプト:



表示内容:
表示内容: