スタイルシート マージンの属性

Webの森.com ホームページ作成支援サイト
マージンの設定属性
- 上下左右に5pxの余白
- 上右下左の余白をそれぞれ設定
- 上下、左右の余白を設定
- 上、左右、下の余白を設定
- 上の余白を5px
- 右の余白を6px
- 下の余白を7px
- 左の余白を7px
※ 数値の値は、px、pt、%などで指定して下さい。ここでは、pxを指定してご説明します。

マージンとパディングの違い

・ マージンは、外側の余白指定
・ パディングは、内側の余白指定
マージンとパディングを使いこなせると、細かいデザインができますので、要素の内側と外側の関係の違いについて色々試してみましょう。また値の指定方法によって効果が違います。臨機応変に上下左右の余白の指定ができるようになりましょう。

上下左右に5pxの余白 - 参考例

table {
margin: 5px;
}

上が5px、右が6px、下が7px、左が8pxの余白をそれぞれ設定 - 参考例

table {
margin: 5px 6px 7px 8px;
}

上下が8px、左右が10pxの余白を設定 - 参考例

table {
margin: 8px 10px;
}

上が8px、左右が9px、下が10pxの余白を設定 - 参考例

table {
margin: 8px 9px 10px;
}

個々に設定する

table {
margin-top: 5px;
margin-right: 6px;
margin-bottom: 7px;
margin-left: 8px;
}
お願い
もしページの内容がお役に立てたら、ポチっと押して貰えると幸いです。

正当なCSSです!