这个 html 的<img>标签怎么回事

2016-12-05 02:49:29 +08:00
 brooky

我真是百思不得其解, 放进去 img 标签为什么有 padding 还是 margin 的值? 如果是图片的原因的话, 为什么第一个有 top 的值 而第二个 div 没有 top 的值

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			* {
				padding: 0;
				margin: 0;
			}
			
			nav {
				height: 57px;
				width: 1200px;
				background: lightseagreen;
			}
			
			img {
				/*这个图片显示的大小是 31*31 格式是 png 是不是这个图片的问题*/
				background: lightgreen;
			}
			
			span {
				
				font-size: 21px;
				line-height: 57px;
				background: gray;
			}
			
			div {
				background: darkgray;
			}
		</style>
	</head>

	<body>
		<nav>
			<img src='http://i1.piimg.com/567571/99f5c8f94f3e02af.png' />
			<span id="second">新世界</span>
		</nav>

		<div>
			<img src="http://i1.piimg.com/567571/99f5c8f94f3e02af.png" />
		</div>
	</body>

</html>
2451 次点击
所在节点    问与答
13 条回复
lidongyx
2016-12-05 02:55:00 +08:00
我告诉你方法，你可以用开发者工具来检查原因，不然这么弱的问题都能难住你。
vizards
2016-12-05 03:00:35 +08:00
这...好像是去年百度前端学院的试题？
des
2016-12-05 08:39:42 +08:00
你搜一下“ img 3px ”就有了，不过好多人解释的都是错的，
img 作为一种行内元素默认对齐方式是针对基线对齐的。
而什么是基线呢？不知道你见过英文四行的格子么？想想“ a ”和“ g ”的占位就知道了。
解决方法也很显而易见了，留给你自己想想
hanzichi
2016-12-05 09:40:06 +08:00
把 <span id="second">新世界</span> 这行去了就 OK 了吧，感觉是 span 标签的 line-height 属性设大了
des
2016-12-05 10:09:29 +08:00
我貌似漏了一点东西
具体可以看这里 https://segmentfault.com/q/1010000000441100
brooky
2016-12-05 11:23:26 +08:00
@vizards 是的
brooky
2016-12-05 11:24:26 +08:00
@lidongyx 听说没有坏问题，只有不好的答案
lidongyx
2016-12-05 11:48:10 +08:00
@brooky 你问这个问题，证明对网页调试和 chrome 开发者工具不够了解，以后遇到相似的问题依然会迷惑，我第一个回复里就已经告诉了你方法。技术学习有一点很重要就是要掌握解决问题的方法。
brooky
2016-12-05 11:56:01 +08:00
@lidongyx https://segmentfault.com/q/1010000000441100
adminsvv
2016-12-05 12:09:34 +08:00
span {

font-size: 21px;
/* line-height: 57px;*/
background: gray;
}
fengxiang
2016-12-05 12:47:31 +08:00
img{vertical-algin:top} ?
angith
2016-12-05 13:07:18 +08:00
img 标签 display :block 一下好像可以解决
longxi
2016-12-06 16:15:17 +08:00
你可能需要这个： http://www.zhangxinxu.com/wordpress/2015/08/css-deep-understand-vertical-align-and-line-height/

这是一个专为移动设备优化的页面（即为了让你能够在 Google 搜索结果里秒开这个页面），如果你希望参与 V2EX 社区的讨论，你可以继续到 V2EX 上打开本讨论主题的完整版本。

https://www.v2ex.com/t/325295

V2EX 是创意工作者们的社区，是一个分享自己正在做的有趣事物、交流想法，可以遇见新朋友甚至新机会的地方。

V2EX is a community of developers, designers and creative people.

© 2021 V2EX