这是一个创建于 2712 天前的主题，其中的信息可能已经有所发展或是发生改变。
我真是百思不得其解, 放进去 img 标签为什么有 padding 还是 margin 的值? 如果是图片的原因的话, 为什么第一个有 top 的值 而第二个 div 没有 top 的值
- 最开始的目的是给上面的那个 img 一个 padding-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>
13 条回复 • 2016-12-06 16:15:17 +08:00
 |
1
lidongyx 2016-12-05 02:55:00 +08:00 via iPhone
我告诉你方法，你可以用开发者工具来检查原因，不然这么弱的问题都能难住你。
|
 |
2
vizards 2016-12-05 03:00:35 +08:00 via iPhone
这...好像是去年百度前端学院的试题？
|
 |
3
des 2016-12-05 08:39:42 +08:00 via Android
你搜一下“ img 3px ”就有了，不过好多人解释的都是错的，
img 作为一种行内元素默认对齐方式是针对基线对齐的。 而什么是基线呢？不知道你见过英文四行的格子么？想想“ a ”和“ g ”的占位就知道了。 解决方法也很显而易见了，留给你自己想想 |
 |
4
hanzichi 2016-12-05 09:40:06 +08:00
把 <span id="second">新世界</span> 这行去了就 OK 了吧，感觉是 span 标签的 line-height 属性设大了
|
|
5
des 2016-12-05 10:09:29 +08:00 via Android
我貌似漏了一点东西
具体可以看这里 https://segmentfault.com/q/1010000000441100 |
|
8
lidongyx 2016-12-05 11:48:10 +08:00 via iPhone
@brooky 你问这个问题，证明对网页调试和 chrome 开发者工具不够了解，以后遇到相似的问题依然会迷惑，我第一个回复里就已经告诉了你方法。技术学习有一点很重要就是要掌握解决问题的方法。
|
 |
9
brooky OP |
 |
10
adminsvv 2016-12-05 12:09:34 +08:00
span {
font-size: 21px; /* line-height: 57px;*/ background: gray; } |
 |
11
fengxiang 2016-12-05 12:47:31 +08:00
img{vertical-algin:top} ?
|
 |
12
angith 2016-12-05 13:07:18 +08:00
img 标签 display :block 一下好像可以解决
|
 |
13
longxi 2016-12-06 16:15:17 +08:00 via Android
|
Select Language