css - 我不明白为什么我的 webheader div 和 header 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 是“something”，第二个是“title”，但它们之间有大约 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;。