相关疑难解决方法(0)

为什么在下面的代码中高度div大于img？图像下方有一个间隙,但它似乎不是填充/边距.

图像下方的间隙或额外空间是多少？

#wrapper {
  border: 1px solid red;
  width:200px;
}
img {
  width:200px;
}

<div id="wrapper">
  <img src="http://i.imgur.com/RECDV24.jpg" />
</div>

我有这样的代码:

        <div id="sc">  
            <h1>1. Orange</h1>
            <p>some text in here </p>                                          
        </div>
        <img class="separator" src="images/separator.png" /> 

"sc"div和"separator"img之间总共有13px的差距.

两者的边距和填充都设置为0,null,空,没有.哎呀.我很生气; d

我试图弄清楚萤火虫发生了什么,但它们之间的空间不属于任何东西,它不是边缘,不是填充物,到底是什么？

没有浮点数,没有显示设置,没有继承的边距或填充.

我的代码出了什么问题？我一直试图删除HTML中的空格但没有帮助(顺便说一句,如果我把分隔符放在"sc"div之上,那么也有一些差距,但是更小).

谢谢.

[添加]

CSS样式:

.separator {
    margin: 0;
    padding: 0;
}

#sc {
    text-align: justify;
    padding: 0;
    margin: 0;
    background-image: url('images/bg.png');  
    background-repeat: repeat-y;
    width: 970px;
}

img使用display: blockCSS属性从内联块元素转换为块对象有什么缺点吗？

大多数时候,我希望它们成为block元素.inline我失去的任何有用的方面？(也许我没有看到一些有用的东西？)

是否应该将所有图像block默认转换为元素？为什么根据规范它们是内联块元素？

PS我想通过定位和浮动以及周围元素来考虑布局.

编辑：我强调不想依赖任何固定尺寸。

我有一个图像想要与文本内联显示。我想要图像

a) 是正方形的，并且

b) 与文字一样高。

想象一下，存在一个名为“H”的 CSS 单元，它等于一条线的高度，就像“ex”等于“x”的高度一样。我希望能够编写这样的代码：

img.myclass {
    width: 1H;
    height: 1H;
}

看来这样的单位实际上并不存在。我对吗？

如果没有这样的单位（明确地说，我想要从一行基线到下一行基线的距离）那么如何在没有Javascript的情况下实现行填充方形图像的目标？

我<img>这样连续显示3 个:

<div style="width: 950px">

                <img src='/UploadedImages/86.jpg' alt='' style="width: 300px; margin: 0px; padding: 0px; border: 1px solid Black" />

                <img src='/UploadedImages/85.jpg' alt='' style="width: 300px; margin: 0px; padding: 0px; border: 1px solid Black" />

                <img src='/UploadedImages/84.gif' alt='' style="width: 300px; margin: 0px; padding: 0px; border: 1px solid Black" />

        </div>

如你所见,我的图像周围有薄黑边框.我的问题是在相邻图像的边界之间有大约5px宽的空白区域,并且我将边距设置为0px但是它不起作用.那么这里发生了什么？