CSS:垂直方向のマージンがよく分からないその1

Eriko.N — Fri, 11 Dec 2009 05:15:03 +0000

　最近やったhtmlの仕事で、結構頭を悩ませた件について書いてみます。

赤字部分の上下のアキを均等にしたい

　このようにタイトルがあって、写真が入り、右側には写真の人物の情報、フロートをクリアして「See all message fromホニャララ」があるわけです。赤字部分（ホントは赤字じゃないけど、分かりやすくするため）の上下のアキを均等にしたいのですね。写真から罫線までのコードはこんな感じにしました…


	
		
		Firstname Surname
Executive Editor
Company
	
	>> See all messages form XXXXX

.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を

>> See all messages form XXXXX

へ変更したのです。そうすると、p.allDetailsの時に追加したmargin: 0;がなくても、理想型【A】になるの…。ふ〜ん。

Studio Eddies » margin

CSS:垂直方向のマージンがよく分からない その1

CSS:垂直方向のマージンがよく分からないその1