>>Delta

marginかpaddingか

2008年4月29日

marginかpaddingか

HTMLとかあまり興味がない方も多いと思うので、本当は図を付けて何を問題視しているのか示した方がわかってもらえると思うんだけど、ちょっと元気がなくて文字だけです。

うちは何かの専門ではない雑食ブログなので、その道に詳しくない人でもどんな作業なのかとか、何が問題なのかとか、どれくらい大変なのかとかいう雰囲気が伝わると良いな、とか思ってるんですがなかなかそういう風にはなりませんね。

読んでも意味がわかんない人はお断り、みたいな雰囲気にはしたくない。そんな理想を持っています。CASPAR003です、こんばんは。

ここから本題です。

CSSのブロック要素で、内容まわりに空白をとりたい場合、marginかpaddingを指定して必要な空白を確保するわけですが、どちらを使うべきか迷うことが結構あります。

イメージとしてmarginというのはブロック同士を引き離すプロパティであるのに対し、paddingというのは内容に余白を付けるプロパティです。今とろうとしている空白が、ブロックの内側なのか外側なのか、borderを付けるとしたら何処に付くべきか、考えてみるけれど結局決めかねて適当に決めてしまうことが多々あります。

簡単なケースだと段落間の空きはmarginでしょうか、paddingでしょうか。僕は何となくmarginっぽい気がしてるんだけど、あまり論理的な説明はできません。

テキストが画面の端に表示されないように余白をとるには

  • bodyなどの親要素にpaddingをつける
  • pなどの子要素にmarginをつける
  • pなどの子要素にpaddingをつける

の3通りの方法があるわけですが、果たしてどれが良いやり方でしょう。うちでは何となくbodyにpaddingをかけたいですがやはり大した根拠はないです。

なにか一本筋の通った考え方がないか1日考えながら過ごしてみましたが何も浮かんできませんでした。机に貼ってある付箋を見ながら内容がボックスの縁にくっついてるのは美しくないよなーなんてことは思いましたけど。

MiniDiary
浪漫倶楽部

そろそろまぬけづらさんの安否が心配になってきました。GWでどっかにお出かけじゃろうか ( ・ω・)?

投稿者 CASPAR003
投稿時刻 23:14
カテゴリー 雑記
コメント 4 件
トラックバック 1 件
記事へのリンク http://www.caspar003.info/delta/archive/2008/04/29/2314
トラックバックURI http://www.caspar003.info/movable_type/mt-trackbacks_ca3.cgi/1544
コメント
投稿者
コメント
ひろや

うちのサイトも body には padding ですね。body は「html の表に出るすべて」という考えなので。

それ以外では html 要素を含めたすべての padding を 0 にして、margin で余白を持たせています。全部 padding 0 にすると、インライン要素に border で線をつけるときとか楽なのですよ (´・ω・`)

CASPAR003

bodyにmarginは確かに不自然ですよね。

*{padding: 0;}ってことでしょか。それでも良さそうだなぁ。インラインにpadding付くと扱いづらいですよね。

ouki

お久しぶりです。blog絶賛放置中なoukiです。

自分はbodyにmarginなどをつけると、画面端にぴったりくっつけたデザインができなくなってしまうので、基本的に*{margin:0;padding:0}をしたあとに、離したい要素にmarginやpaddingをつけてます。

ちなみにうちのCSSなのですが、放置中にいつの間にかサーバ移転があり、前のCSSが消えただけなのです。そんなわけで、その内に元に戻すか新しいCSSにするか……悩み中です。

CASPAR003

oukiさんお久しぶりですー。CSSはそういうわけでしたか。もし新CSSになったらまたパクるかもしれません。放置は絶賛してません(笑)。RSS拾いながらじっとまってますよー。

> 離したい要素にmarginやpadding

そう、まさにその離したい要素があるときにmarginにするかpaddingにするか悩みません?という話です(笑)。背景色やボーダーがなければ基本的に同じ表示結果が得られますが、どっちでも良いからと言って思いつきで書いてると後々トラブルのもとになることが段々わかってきて何か筋の通った考え方が欲しいなーと思って書いてみました。

トラックバック
コメント投稿
コメントフォーム
項目名 入力欄

ブログ情報

カレンダー
2017年1月
1 2 3 4 5 6 7
8 9 10 11 12 13 14
15 16 17 18 19 20 21
22 23 24 25 26 27 28
29 30 31
最近のエントリー
最近のコメント
コメントを頂いたエントリー
コメントをくださった方一覧
コピー用紙の裏表
でった☆
CASPAR003
あのー
CASPAR003
amumo
CASPAR003
mariko
kazu
お仕事で青ざめた話
iun
iun
CASPAR003
AcrobatでPDFの一括印刷
Caesar
CASPAR003
Shadeのレンダラー仕様メモ
iun
CASPAR003
ブログ同盟本 C87 3日目 東S-04b
CON$
CASPAR003
Ca3 Post_Effector 2.0
sisioumaru
CASPAR003
sisioumaru
CASPAR003
Shade15について雑感
iun
CASPAR003
iun
色について
iun
CASPAR003
Lv67
iun
CASPAR003
雪まつり行ってきたよ
iun
CASPAR003