display：block拉伸链接宽度

Question

我不知道为什么，但是当我将<img>的CSS设置为display: inline时，它可以正常工作。

但后来我写了display: block;，它正在整个屏幕上拉伸围绕元素的链接。

Answer 1

块元素占用可用的整个宽度，在锚标记封闭之前和之后有一个新行，它也是全宽的。

内联元素仅占用所需的宽度，并且不会强制换行。

要修复它，你应该把你的“我的工作在instagram上”锚标签和图像包装在div中，这是一个块元素，它不会拉伸内部元素。另外，从您的CSS中的instawork类中删除display:block。 JSFiddle Example

<div><a href="http://www.instagram.com/pauldewar_me" target="blank_"><img src="http://www.pauldewar.me/imgs/instawork.png"></a></div>

参考：CSS Blocks vs Inline CSS Display Styles