我无法弄清楚为什么我的webheader div和我的标题div之间有空格？

Question

以下是相关的HTML代码：

<div id="something"><img src="Images/guysonlycopy.jpg" alt="image" width="1200"     height="300" /></div>  
   <header>
<div id="title"><img     src="http://blog.flamingtext.com/blog/2013/08/29/flamingtext_com_1377801873_445376518.jpg" padding="15px" /></div>

我的第一个div是“东西”，第二个是“标题”，但它们之间的差距约为5px，我不想要。

body {
font: normal .8em/1.5em Arial, Helvetica, sans-serif;
background: #ebebeb;
    width: 1200px;
margin: 100px auto;
color: #666;
}

#wrapper {
background-color: #ccc;
margin: 0;
width: 1200px;
}

/* Header
--------------------------------------------*/

header {
background-color: #170a6e;
height: 100px;
width: 1200px;
margin: 0;
padding: 0;
}

header h1 {
font-size: 4.5em;
float: left;
margin: 20px;
padding: 5px;

}

#something {
text-align: center;
padding: 0;
margin: 0;
}

#title {
float: left;
margin-left: 25px;
margin-top: 11px;
}

那是css。我希望图像与第二个div之间没有差距。

Answer 1

图片为inline elements by default，表示他们离开descender space。要摆脱这种情况并将其用作block级元素，请在图像上设置display: block;。