當添加<img>時，div之間的多餘空間

Question

#child div之間有一些空格。我怎樣才能使他們完美堆疊沒有任何差距？當我沒有<img>時沒有問題。此外，圖像下方有藍色條紋，這是div的一部分，但我不明白它爲什麼顯示。

我不是HTML或CSS的專家。我是一個初學者，他出於市場營銷的原因開始選擇它。任何幫助和/或建議非常感謝它！

#parent { 
 
    max-width: 850px; 
 
    margin: 0 auto; 
 
    border: 10px solid black; 
 
} 
 
#child { 
 
    background-color: blue; 
 
    text-align: center; 
 
    color: #eee; 
 
    font-size: 56px; 
 
} 
 
img { 
 
    width: 100%; 
 
}

<div id="parent"> 
 
    <div id="child"> 
 
    <img src="http://s3.amazonaws.com/letsrumbl-marketing/images/8c146690-f04b-4e60-89ca-5e2d979f5a16/HowToShare3.png" /> 
 
    </div> 
 
    <div id="child"> 
 
    <p>Div 2</p> 
 
    </div> 
 
    <div id="child"> 
 
    <p>Div 3</p> 
 
    </div> 
 
    <div id="child"> 
 
    <p>Div 4</p> 
 
    </div> 
 
</div>

這裏是我的問題的圖像。 http://imgur.com/a/sqdpB

Answer 1

嘗試設置margin和padding在一段 爲0px應該解決您的問題

Answer 2

段落默認情況下，保證金，所以才刪除。而要擺脫圖像下方的線，加vertical-align:top您img規則：

#parent { 
 
    max-width: 850px; 
 
    margin: 0 auto; 
 
    border: 10px solid black; 
 
} 
 
#child { 
 
    background-color: blue; 
 
    text-align: center; 
 
    color: #eee; 
 
    font-size: 56px; 
 
} 
 
img { 
 
    width: 100%; 
 
    vertical-align: top; 
 
} 
 
p { 
 
    margin: 0; 
 
}

<div id="parent"> 
 
    <div id="child"> 
 
    <img src="http://s3.amazonaws.com/letsrumbl-marketing/images/8c146690-f04b-4e60-89ca-5e2d979f5a16/HowToShare3.png" /> 
 
    </div> 
 
    <div id="child"> 
 
    <p>Div 2</p> 
 
    </div> 
 
    <div id="child"> 
 
    <p>Div 3</p> 
 
    </div> 
 
    <div id="child"> 
 
    <p>Div 4</p> 
 
    </div> 
 
</div>