理由はわかりませんが、CSS を に設定<img>
するdisplay: inline
と正常に動作します。
しかし、その後、私が書いdisplay: block;
たところ、要素に巻き付けられたリンクが画面全体に引き伸ばされていました。
理由はわかりませんが、CSS を に設定<img>
するdisplay: inline
と正常に動作します。
しかし、その後、私が書いdisplay: block;
たところ、要素に巻き付けられたリンクが画面全体に引き伸ばされていました。
ブロック要素は利用可能な全幅を占め、前後に新しい行があり、アンカータグがそれを囲んでいるため、それも全幅になります。
インライン要素は、必要な幅だけを占有し、改行を強制しません。
これを修正するには、ブロック要素である div で「my work on instagram」アンカー タグと画像をラップする必要があります。これにより、内部要素が引き伸ばされなくなります。また、display:block
css の instawork クラスから を削除します。JSFiddle の例
<div><a href="http://www.instagram.com/pauldewar_me" target="blank_"><img src="http://www.pauldewar.me/imgs/instawork.png"></a></div>
リファレンス: CSS ブロック vs インライン CSS 表示スタイル