问题 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:我知道可以使用绝对定位或者浮动定位实现这个效果，我就是不明白为何我这两种想法是失败的呢？）

感谢愿意解答的好心人！~

4 条回复 • 2017-07-30 19:18:42 +08:00

doing

2017-07-30 17:18:52 +08:00

1.span 是行级元素，你如果把它变成 display:block 看结果对比。
2.压扁窗口也会自动移动。不明白意思

Newyorkcity

2017-07-30 17:26:01 +08:00

@doing
1 行级元素不会随着它的内容（ img 元素）而变化它的宽度吗？
2 以 V 站为例，在版面旁边不是有一个个人状态的块元素嘛。不论怎么把窗口的左右距离缩短，这个块元素都会在版面和看帖区域的右侧。我的意思就是一个块元素它紧贴着窗口的右边缘，然后不管怎么样都贴着。
边 A...................B 边
↓把窗口变窄
边 A.........B 边
就这种效果

TabGre

2017-07-30 17:26:05 +08:00

- 为什么 span 元素没有完全包围 img 元素并且看起来占据了一个如此奇怪的空间呢？
你这么认为的依据是什么？

我的看法：span 是 inline 元素，没有 width,height 值，它的高度由内容决定，而 img 为 replaced element，这就意味着它没有高度，所以 span 没有你想想中的那么表现。

[jsfiddle]( https://jsfiddle.net/8h52806n/)

Newyorkcity

2017-07-30 19:18:42 +08:00

@TabGre 谢谢。。。

两个新手的 HTML/CSS 问题，感谢愿意解答的好心人

问题 1

问题 2