どうも！LSSです！！
15パズル画像版に手をつけはじめて、ほぼほぼ出来かけているのですが…謎の10pxぐらいのズレに気づき、marginやらpaddingやら設定しても治らず。
と、すっごく単純なコードで試しても再現する事に気づき、初めて「imgタグそのものにそういう仕様がある」事を知りました^^;
現象の再現
わずか、これだけのコード↓で現象を確認できます。
<div style="border: 1px solid black;">
<img src="https://cdn-ak.f.st-hatena.com/images/fotolife/l/little_strange/20220117/20220117221539.jpg" />
</div>
divタグの範囲が分かるように、border: 1px solid black;を指定する事によって、div要素の周りに黒い線をつけます。
そしてその中に、imgタグで画像を入れている…だけ。
すると↓こうなります。
Windows＋GoogleChromeで確認すると、画像の下、黒い線との間にわずかに白い隙間が空いてしまっています^^;
一応、他ブラウザで見え方が違うかもなのでスクショを載せておくと、
↑こんな風に見えています。
この「白い隙間」が、marginでもpaddingでもない何か？で、色々試みたものの治らず、ググってみる事にしました。
解決策
<div style="border: 1px solid black;">
<img src="https://cdn-ak.f.st-hatena.com/images/fotolife/l/little_strange/20220117/20220117221539.jpg" style="vertical-align: bottom;" />
</div>
↑のように、imgタグに「vertical-align: bottom;」とCSSを当ててやると…
↑このように、無事画像と枠がピッタリあいます！！
ちなみに「bottom」の部分は「top」でも「middle」でも同様に解決します^^
あとがき
いやぁ…まさかの謎仕様に時間を取られてしまいました^^;;;;;
15パズル画像版はとりあえず遊べるところまで出来ていて、この隙間問題に起因するズレも治りましたが、クリア時の演出や＋α要素を足したいので、近日公開って感じです^^
ってなとこで、今回はこのへんで！
次回もまた、よろしくお願いします^^
