So-net無料ブログ作成
メッセージを送る

kuu♪からのお知らせ

■スキンを作るコツは、とにかくプレビューで確認することです。
 数字を替えた! 色を替えた! 画像を替えた!そのたびにプレビュー! で確認!
 そしてこまめに保存してください。

■コメントをたくさんいただいているのですが返信もままならない状況ですのでしばらくの間コメントの受付を停止させていただきます。ごめんなさい。

また、管理人kuuがしばらくソネブロを離れている間に随分仕様の変更等あったみたいですので、当ブログの記述では対応できないものも出ているかもしれません。

”margin” と ”padding”の違い  [基礎知識]

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

 □よくセットで記述してあり、どちらを扱えばどういう風に変わるのかとてもわかりにくいです。
 □marginは〔外側の余白〕 paddingは〔内側の余白〕 と覚えましょう。
 
box.gif

 
 [例1.] margin:50px;を挿入したときの表示 

マージン.PNG

 [例2.] padding:20px;を挿入したときの表示 

パディング.PNG

 [marginの記入例]
  □①~④まですべて同じ意味です。
  □その時々の用途にあわせて記述の仕方を変えてみてください。

 ①margin:12px; (すべて)
 ②margin:12px 12px; (上下 左右)
 ③margin:12px 12px 12px 12px; (上 右 下 左)
 ④margin-top:12px; (上)
margin-right: 12px; (右)
margin-bottom:12px; (下)
margin-left:12px; (左)

 [paddingの記入例]
  □⑤~⑧まですべて同じ意味です。
  □その時々の用途にあわせて記述の仕方を変えてみてください。

 ⑤padding:12px; (すべて)
 ⑥padding:12px 12px; (上下 左右)
 ⑦padding:12px 12px 12px 12px; (上 右 下 左)
 ⑧padding-top:12px; (上)
padding-right: 12px; (右)
padding-bottom:12px; (下)
padding-left:12px; (左)

 


nice!(8)  コメント(1) 
共通テーマ:blog

nice! ありがとう 8

コメント 1

コメントの受付は締め切りました
過去最高記録更新中!何もしないでなぜ儲かる!?秘密の方法を限定公開中。今すぐクリック!

ちょっとしたことに気づくだけで、あなたの月収は最大2倍になります。公開期間を限定しておりますので、今すぐチェックしてください
by 過去最高記録更新中!何もしないでなぜ儲かる!?秘密の方法を限定公開中。今すぐクリック! (2010-04-26 08:39) 

ありがとうございます♪♪

記事が役に立たれたら、下のバナーの興味があるものをクリックしてもらうとうれしいです。

  

         

この広告は前回の更新から一定期間経過したブログに表示されています。更新すると自動で解除されます。

×

この広告は1年以上新しい記事の更新がないブログに表示されております。