html - 链接环绕图像使 div 稍高

标签 html css

如何使图像周围的链接不向图像 div 添加另一个像素或两个高度?

这是简单的代码:

<div><a href="#"><img src="http://placekitten.com/g/200/300"></a></div>

http://jsfiddle.net/xrGDv/

图片由 placekitten 托管并由 Titran's Kasper 拍摄

有没有一种动态的方法来做到这一点?即不必给 div 一个固定的高度?

最佳答案

向图像添加样式规则,例如 display: blockvertical-align: top

该图像是一个内联元素,并将在包含该图像的内联框的基线下方显示一些空白。

例如:http://jsfiddle.net/audetwebdesign/xrGDv/2/

关于html - 链接环绕图像使 div 稍高,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/17505418/

相关文章:

php - 如果数据库值等于 1,则将类添加到 img

css - 字体平滑技术?文本阴影在 Chrome 14.0.833.0 或更高版本中呈现不同

内容删除后 HTML/CSS 伪元素移动到下一行

html - Bootstrap 两个导航栏,辅助栏与主栏下拉菜单重叠

css - 通过 Sass 在 JSF 样式表资源中设置背景图像 URL

javascript - 像这个网站一样的 CSS 框阴影

javascript - 如何在点击匹配游戏时存储和比较两个元素?

jquery - 如何通过自定义 jquery 触发多维数据集组合?

php - 如何将所选数据保留在 <select> 元素中?超文本标记语言

html - 使用角色 ="list"和角色 ="listitem"的原因?