left (right) プロパティについて

次のように、ベース画像の上に別の画像をのせて表示させています。

<style>
<!--
.box { position:relative; left:50%; }
.baseimage { position:relative; z-index:1; left:-225px; }
.image1 { position:relative; z-index:2; left:-100px; top:-200px; }
.image2 { position:relative; z-index:2; left:-100px; top:-300px; }
-->
</style>

<div class="box">
<img src="baseimage.jpg" class="baseimage">
<img src="image1.jpg" width="30" height="30" class="image1">
<img src="image2.jpg" width="30" height="30" class="image2">
</div>

このとき、image1 と image2 の左端からの距離が一致せず、ずれてしまいます。
それは何故なのでしょうか？
コーディングに問題があるのでしょうか？

お教えいただけると幸いです。よろしくお願いいたします。

No.1 ベストアンサー 回答者： amyo 回答日時： 2013/01/28 23:25

imgがインライン要素であることが原因でずれてしまっているのでは、と思います。

スタイルに以下を追加してみてください。
img{
display:block;
}

この回答へのお礼

早速ご回答いただきありがとうございます。

ずれずに表示できました。

改めて御礼いたします。

お礼日時：2013/01/29 07:20