[CSS] マージンを指定する(margin)

2019年8月18日

マージンを指定するには、スタイルシートの「margin」を使用します。

マージン(margin)は、要素の外側の余白のことです。

上(margin-top)、下(margin-bottom)、左(margin-left)、右(margin-right)
の4方向あります。

上下左右のマージンを個別に指定する

上下左右のマージンを個別に指定するサンプルです。
この場合、指定しない側のマージンはデフォルト値が使用されます。

例)右のマージンを20pxにする

margin-right:20px;

【結果】

あいうえお

上下左右のマージンを同時に指定する

上下左右のマージンを同時に指定するサンプルです。

例)上下左右のマージンを10pxにする

margin:10px;

【結果】

あいうえお

例)上下のマージンを10px、左右のマージンを20pxにする

margin:10px 20px;

【結果】

あいうえお

例)上のマージンを10px、左右のマージンを20px、下のマージンを30pxにする

margin:10px 20px 30px;

【結果】

あいうえお

例)上マージンを10px、右マージンを20px、下マージンを30px、左マージンを40pxにする

margin:10px 20px 30px 40px;

【結果】

あいうえお

関連項目


スポンサーリンク

CSS

Posted by tora