2018CSSでのmargin設定の簡単なまとめHTMLとCSSで作成する入れ子のボックスを作成する時の注意点を整理しました。今回はmargin処理です。通常はfloat等で処理するので、こんな使い方はあまりしないのですが、コレが理解出来ないと思わぬトラブルが出てしまいます。以下が上図のソースとなります。マゼンタの300pixel四方、グレーの200pixel四方、黄色の100pixel四方を<div>配置しています。全てが左上に揃ってしまいセンター合わせには成りません。#ffd700;}----------------------------------ここで、rulr.cssの#hotpink_box、css上の#silver_boxと#gold_boxのmargin設定を以下の様に変更する事で上図のようになります。上下関係がセンターになっていません。auto;上下関係がセンターにするために、css上の#silver_boxと#gold_boxのmargin設定を以下の様に変更します。それぞれのボックスのサイズから、上下の空きは50pxだからです。上図のように計算上の結果にはなりません。これは<div>がお互いに干渉しているからだそうです。auto;そこで、お呪いとしてhtml上の以下の部分の最後に<br>を追加します。論理的にはこれで問題無いのですが、<br>の分だけそれぞれの<div>が下がっているコトを計算に入れなくては成りません。id="silver_box"><br>marginで前後関係を0pxにすると上図のように隙間が空いてしまいます。auto;(※)ブラウザのデフォルトの文字サイズが16pxであり、<br>1つにつき、行間が半分追加されるので、(16+(16/2)=24)となります。よって、各<div>の中で16px以外の文字サイズを利用する場合はそれに留意する必要があります。Event』にて確認出来ます。スパムの多発により、コメント機能はしばらく停止いたします(2015年7月5日〜)。申請して頂ければ大歓迎です。Blog134投稿を追加しています。該当投稿へのコメントや、旧Blogに特化した情報は除いています。Blogと旧Blogは公開を停止しています。Work)は、2000年01月19日〜2003年12月31日までのDailyPhotoImagingでの画像合成1443枚を継続し、連番となっています。2018年より、グラフィク系ソフトウェアを中心としたTips集がメインになっていますが、従来の連載は終了ではなく不定期ながら継続しています。