久しぶりのスタイルシートネタです。
今回はマージンとパディングについて記述したいと思います。文章で説明するには難しいので実際に表示したいと思います。
マージン、パディングは余白を確保する属性
実際に例をしめしてみます。
実線で囲った部分が文章の一段落になります。実線から内側の実際に文字が書かれている部分(薄緑)までの余白がパディング、反対に水色の余白部分がマージンになります。
マージンの指定方法
マージンを指定する場合はmarginという属性に値をセットします。
マージンを一括で指定する
margin:指定値;
指定された値で上下左右のマージンを指定します。例えばmargin:10pxとすれば上下左右すべて10pxの余白をとります。
マージンを一括で指定する その2
margin:top値 right値 bottom値 left値;
時計回りに値を指定します。
マージンを個別に指定する
margin-x:指定値;
マージンを上下左右個別に指定します。Xにはtop,bottom,left,lightの文字列が入ります。
パディングを指定する
パディングの指定方法もマージンと同様です。
パディングの値を指定
padding:指定値;
パディングの値を指定その2
padding:top値 right値 bottom値 left値;
パディングを個別に指定
padding-x:指定値;
HTMLの文書は上から下、左から右に流れるため上と左に適度の余白を設定すると文章が読みやすくなると思います。
★記事がお役に立ちましたら応援クリック願います↓
人気ブログランキングへ
にほんブログ村 ブログノウハウ
ブログ王ランキングはこちらをクリック!
関連記事




コメントする