スタイルシートに関する狭い話で恐縮だが今日気づいたのでメモとして(
サンプルページ)
ブロック要素に float を指定した要素の隣接要素の margin の注意点
float:left を指定した P要素
margin:30px 0;
で 上下30px 左右 0のマージンを指定したブロック要素
float を指定したブロック要素と隣接するこの要素の周りには margin: 20px を指定したが
width: aa px; margin: bb px;
を指定すると、左マージンは親要素(黄色いブロック)の左端起点で計算されるようになってしまい、配置は float指定した要素(白いブロック)の右側マージン(この場合 0)の外側に配置されるので設定した左マージンが効かない(白いブロックの右側にマージンが入らない)。
黄色いセルの堺が親要素のボーダーライン となる
このような下マージンを超えた行からの回りこみにも注意
基本的な話で、今まで知らなかったのは恥ずかしい話だが新しい発見で今までのモヤモヤがスッキリした。
今日の写真は、もう咲き始めて1ヶ月以上経つが、一輪だけスックと立って目立っていたスイセン。