細かいpx数値指定付きのPSDで渡されたデザインファイルを元にコーディングしているのですが、初めてのことなので余白の取扱いが分からず困っています。
例えば、ある<p>タグのテキストからボックスの右端までの距離が20pxと指定してある場合、padding-right:20px;とか指定すればいいと思ってしまうんですが、実際は、テキストによっていは右側に1～5pxほどの余白ができて、そこから20pxなので、20pxと指定してもパッと見の余白としては21～25pxになってしまうと思うので、padding-right:15～19px;とかにしないといけないんじゃないか、、、という、この考え方はおかしいでしょうか？そんなことしてたらキリがないだろうとは思うのですが...
みんなの回答 11 件
トピ主です。同様にline-heightによっても、実際の上下の余白が変わってくると思うのですが、このあたり皆さんどういう考え方でコーディングしてるんでしょうか？？？
そのPSDデータを作ったデザイナーに確認すればいいじゃないの。
ここで他人の意見聞くより早いし、間違いが無いと思うんだけど？
指定はこの数値だけど見た目が違うのでこの数値にしました、って提出されると問題が大きいと思う。あとで修正が返ってくるなという前提で数値通りやるか、あらかじめデザイナーに確認するべきだと思う。他社デザイナーだからこそホウレンソウは大事だと思うよ。
指定通り20pxでとっておけば大丈夫ですよ。そんな紙媒体じゃないんだから、デバイスフォントの部分でそこまでこだわる必要はないよ。
上の人の書いてる通り、css上は指定された通りにすればいいです。綺麗に20pxのスペース持たせるなら、text-justifyかましてもOK。これはデザイナーに確認したほうがいいですけどね。
縦方向の余白については皆さんどのように考えていますか？
line-heightの影響を受けると思うのですが、このQAのように、その分わざわざネガティブマージンで相殺したりしているのでしょうか？？？
line-height指定で発生する余白の対応 | Webデザイン・CSSのQ&A【OKWave】
http://okwave.jp/qa/q7988606.html考えすぎなんじゃない？
ブラウザによっても文字の余白は違うんだし、細かく指定したからと言って全てを統一することは不可能だと思う
普通に20px取っておけばokでしょ
line-heightの関係で余白はかわりますね。
誤差が1px程度なら問題ないですが、5pxもかわるとなると問題です。
質問者様がおっしゃっている通り、padding-right:15～19pxのように調整してあげるべきです。
結果としてあがっているデザインと同じものにすればOKだと思います。
設計では右側に20pxとしましたが、デバイス毎のフォント種や文字長の違いによって、必ずしもそうはならないケースがあります。また、行高についても同様です。
と、事実をそのまま伝えればよいと思います。
webを理解しているデザイナであれば、十分な説明です。
表示を操作しているのは、デザイナではなく、ブラウザの仕様なのですから。
テキトーでいいんだよそんなもん。
気楽にやろうぜ
デザインの勉強するとどこに比重を置いてコーディングすればわかるようになるよ。デザインに含まれてる意図もわかるようになるし。
自分の成長にもなるしおすすめ。
関連するトピックス