V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
V2EX 提问指南
brooky
V2EX  ›  问与答

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

  •  
  •   brooky · 2016-12-05 02:49:29 +08:00 · 2538 次点击
    这是一个创建于 2912 天前的主题,其中的信息可能已经有所发展或是发生改变。

    这个放进去的图片

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

    font-size: 21px;
    /* line-height: 57px;*/
    background: gray;
    }
    fengxiang
        11
    fengxiang  
       2016-12-05 12:47:31 +08:00
    img{vertical-algin:top} ?
    angith
        12
    angith  
       2016-12-05 13:07:18 +08:00
    img 标签 display :block 一下好像可以解决
    longxi
        13
    longxi  
       2016-12-06 16:15:17 +08:00 via Android
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   4103 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 34ms · UTC 05:20 · PVG 13:20 · LAX 21:20 · JFK 00:20
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.