这是一个创建于 2997 天前的主题，其中的信息可能已经有所发展或是发生改变。
问题 1
<!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <!-- <link rel="stylesheet" type="text/css" href=""> --> <style> span { border: 5px solid green; } img { border: 5px solid red; } </style> </head> <body> <div> <span ><img alt="图片" src="file:///D:/HTML/Head%20First%20HTML%20and%20CSS/chapter%2011/starbuzz/images/headerLogo.gif"></span> </div> </body> </html> 代码是这样的，然后效果是
其中绿色的是 span 元素的边框，红色的是图片的。我想问的问题是，为什么 span 元素没有完全包围 img 元素并且看起来占据了一个如此奇怪的空间呢？
问题 2
<!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <!-- <link rel="stylesheet" type="text/css" href=""> --> <style> div { border: 5px solid yellow; } img { border: 5px solid red; } #T { /* margin-left: auto; */ margin-right: 0xp; } </style> </head> <body> <div> <img alt="图片" src="file:///D:/HTML/Head%20First%20HTML%20and%20CSS/chapter%2011/starbuzz/images/headerLogo.gif"> <img id="T" alt="图片" src="file:///D:/HTML/Head%20First%20HTML%20and%20CSS/chapter%2011/starbuzz/images/headerLogo.gif"> </div> </body> </html> 现在在一个 div 中有两个图片左右排列，我想要让右边那个图片紧贴窗口右侧，如果压扁窗口也会自动移动。 尝试了将它的 margin-left 设为 auto （不是说 auto 是自动填满的意思吗），将右侧图片与左侧图片间的外边距自动填满，那图片不就自动到了窗口最右边了吗？另一个想法是 margin-right 设为 0px，那图片也应该会在自动贴在窗口左边吧？
但是这两个方法都失败了，请问两者为何不成功呢？（ PS:我知道可以使用绝对定位或者浮动定位实现这个效果，我就是不明白为何我这两种想法是失败的呢？）
感谢愿意解答的好心人！~
 | 1 doing 2017-07-30 17:18:52 +08:00  1 1.span 是行级元素，你如果把它变成 display:block 看结果对比。 2.压扁窗口也会自动移动。不明白意思 |
 | 2 Newyorkcity OP @doing 1 行级元素不会随着它的内容（ img 元素）而变化它的宽度吗？ 2 以 V 站为例，在版面旁边不是有一个个人状态的块元素嘛。不论怎么把窗口的左右距离缩短，这个块元素都会在版面和看帖区域的右侧。我的意思就是一个块元素它紧贴着窗口的右边缘，然后不管怎么样都贴着。 边 A...................B 边 ↓把窗口变窄 边 A.........B 边 就这种效果 |
 | 3 TabGre 2017-07-30 17:26:05 +08:00 1 - 为什么 span 元素没有完全包围 img 元素并且看起来占据了一个如此奇怪的空间呢？ 你这么认为的依据是什么？ 我的看法：span 是 inline 元素，没有 width,height 值，它的高度由内容决定，而 img 为 replaced element，这就意味着它没有高度，所以 span 没有你想想中的那么表现。 [jsfiddle]( https://jsfiddle.net/8h52806n/) |
| 4 Newyorkcity OP @TabGre 谢谢。。。 |
Select Language