マージンとパディングの調整(スタイルシート)

| コメント(0) | トラックバック(0)

久しぶりのスタイルシートネタです。

今回はマージンとパディングについて記述したいと思います。文章で説明するには難しいので実際に表示したいと思います。

マージン、パディングは余白を確保する属性

実際に例をしめしてみます。

水色の部分がマージン、薄緑の部分がパディング

 

実線で囲った部分が文章の一段落になります。実線から内側の実際に文字が書かれている部分(薄緑)までの余白がパディング、反対に水色の余白部分がマージンになります。

マージンの指定方法

マージンを指定する場合は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の文書は上から下、左から右に流れるため上と左に適度の余白を設定すると文章が読みやすくなると思います。

 


★記事がお役に立ちましたら応援クリック願います↓
人気ブログランキングへ
にほんブログ村 ブログノウハウ
ブログ王ランキングはこちらをクリック!

BuzzurlにブックマークBuzzurlにブックマーク

関連記事


  1. FC2ブログのタイトル画像を変更する
  2. 無料ブログのカスタマイズ紹介をはじめます
  3. 無料ブログで可能なカスタマイズ
  4. HTMLとスタイルシート(CSS)
  5. FC2ブログのテンプレートをカスタマイズする

トラックバック(0)

トラックバックURL: http://tryandbuild.com/mt/mt-tb.cgi/185

コメントする

ランキング参加中!

にほんブログ村 ブログブログ ブログノウハウへ







TREview

運用環境





このブログ記事について

このページは、かずが2008年6月22日 17:11に書いたブログ記事です。

ひとつ前のブログ記事は「MT4.12にアップグレードしました。」です。

次のブログ記事は「FC2ブログで画像ファイルを管理する」です。

最近のコンテンツはインデックスページで見られます。過去に書かれたものはアーカイブのページで見られます。