最近やったhtmlの仕事で、結構頭を悩ませた件について書いてみます。
赤字部分の上下のアキを均等にしたい
このようにタイトルがあって、写真が入り、右側には写真の人物の情報、フロートをクリアして「See all message fromホニャララ」があるわけです。赤字部分（ホントは赤字じゃないけど、分かりやすくするため）の上下のアキを均等にしたいのですね。写真から罫線までのコードはこんな感じにしました…
<div class="individuals"> <div class="repName"> <img src="img/picture.jpg"> <p><span>Firstname Surname</span><br>Executive Editor<br>Company</p> </div> <p class="allDetails"><a href="#">>> See all messages form XXXXX</a></p> </div>
.individuals{ width: 360px; margin-top: 15px; margin-bottom: 10px; border-bottom: 1px dotted #ccc; } .repName{ width: 220px; } .repName img{ width: 60px; height: 60px; float: left; margin-right: 10px; } .repName span{ font-weight: bold; } .repName p{ width: 100px; margin-top: 0; margin-bottom: 0; float: left; } p.allDetails{ clear: both; padding-top: 15px; padding-bottom: 15px; }
実際にはもっと他にもフロートしている部分があるのですが、上記のコードでも同じ症状がでることを確認しました。ブラウザ間でどのようになるかというと、こんなカンジ。
Internet Exproper 7
IE8,Fairefos, Safari
「See all message fromホニャララ」の上下のアキ具合が、IE7とその他のブラウザでは異なっています。なんだよ〜よく分からないよ〜。でも一番はじめに見ていただいた【A】の画像のように、どのブラウザでも上下幅が均等ではありません。クラス名individualsに付けたマージンがあやしいので、「See all message fromホニャララ」を装飾しているクラス名p.allDetailsにmargin: 0;を追加してやると、どちらも見事に理想型【A】のようになります。
実はその時は、p.allDetailsにmargin: 0;を追加したんじゃなくて、htmlを
<div class="allDetails"><a href="#">>> See all messages form XXXXX</a></div>
へ変更したのです。そうすると、p.allDetailsの時に追加したmargin: 0;がなくても、理想型【A】になるの…。ふ〜ん。
