-
ID:KsuZMM さんの質問

こんにちは。以前からすっごい初歩的なことで気になっていることがあったのですが、以下のようなHTMLがあった場合、paddingは親要素である#layout-containerにつけるべきなのでしょうか?

それとも、#layout-containerに囲われている子要素それぞれでpaddingを指定してあげた方が良いのでしょうか?

親要素の横幅いっぱいに子要素が広がるものもあれば、親要素の外枠と少し余白をおいて子要素があるという場合においてです。

<div id="layout-container">
<h1 class="title">title</h1>
<div class="entryBody">
<p>
コンテンツ。コンテンツ。コンテンツ。コンテンツ。コンテンツ。コンテンツ。コンテンツ。コンテンツ。コンテンツ。コンテンツ。コンテンツ。コンテンツ。
</p>
</div>
<div class="entryFooter">
aaa
</div>

</div>

■親要素にpadding設定をし、子要素で必要に応じてネガティブマージンを使って調整したパターン
ttp://codepen.io/anon/pen/AJHKG

■子要素それぞれにpadding設定をするパターン
ttp://codepen.io/anon/pen/aGvsd

上記サンプルは簡略化したものですが、親要素の横幅いっぱいに子要素が広がるものもあれば、親要素の外枠と少し余白をおいて子要素があるというレイアウトの場合、皆様はどのように対応されていますでしょううか?

ずっと気になっていることでして、すごい初歩的な質問となって恐縮ですが教えて頂けると嬉しいです。

みんなの回答 2 件

ID:RrNmm2 さんの回答

子要素に付けてます。
寧ろ親要素につけるとか初めてみましたけど、こちらを使うメリットが見当たらないです。

ID:KsuZMM

ありがとうございます。参考になりました!子要素につけるものなのですね。

ID:NtYj6G さんの回答

こういう端までタイトル帯が引かれてるデザインのときは、普通にネガティブマージン使ってるよ。
CMSとかで、タイトルとコンテンツ部分が入力出来るようになってるときは特に。p,h1-6,strong,tableとか使う可能性のある全ての要素に、余白関連のスタイル当ててたら調整が大変だし、コードも短くかける。

ID:KsuZMM

ということは親要素にpaddingということでしょうか?こちらのように?
ttp://codepen.io/anon/pen/AJHKG

ID:NtYj6G

URL逆じゃないかな?見たほうが早いかもしれないから実例。
これはCMSで組んであってコンテンツが編集可能なんだけど、青帯のタイトル部分がネガティブマージン。
ttp://bit.ly/1qzswmf

最終更新日:2014-08-23 (2,760 views)

関連するトピックス

ページ上部に戻る