e日記風 独り言

気まぐれ & 気まま & 天邪鬼な老いぼれ技術屋の日々の記録のうち、主に Perl・CGI・HTMLなど Web技術に関連した記事です。
右端上端の同一カテゴリージャンプボタンで他の同じカテゴリーの記事を順番にご覧いただけます。
Access Counter:  総アクセス数
-1552- 狭い話
スタイルシートに関する狭い話で恐縮だが今日気づいたのでメモとして(サンプルページ)
ブロック要素に float を指定した要素の隣接要素の margin の注意点


float:left を指定した P要素
margin:30px 0;
で 上下30px 左右 0のマージンを指定したブロック要素


float を指定したブロック要素と隣接するこの要素の周りには margin: 20px を指定したが
 width: aa px; margin: bb px;
を指定すると、左マージンは親要素(黄色いブロック)の左端起点で計算されるようになってしまい、配置は float指定した要素(白いブロック)の右側マージン(この場合 0)の外側に配置されるので設定した左マージンが効かない(白いブロックの右側にマージンが入らない)。
黄色いセルの堺が親要素のボーダーライン となる
このような下マージンを超えた行からの回りこみにも注意

 基本的な話で、今まで知らなかったのは恥ずかしい話だが新しい発見で今までのモヤモヤがスッキリした。

今日の写真は、もう咲き始めて1ヶ月以上経つが、一輪だけスックと立って目立っていたスイセン。
2016/03/16