首先<div>設(shè)置了寬而沒設(shè)置高,所以高度由內(nèi)容而定,其次設(shè)置了上下左右的內(nèi)邊距都為20px,所以內(nèi)容塊就會跟<div>的邊框有20px的距離;然后在內(nèi)容塊中加入<img>,然后按照任務(wù),設(shè)置<img>的寬高為95px,大家注意到我的<img>設(shè)置了背景啊,怎么沒顯示呢,因為你現(xiàn)在沒有設(shè)置<img>的內(nèi)邊距,所以你現(xiàn)在的<img>的背景被你的商品圖片給遮住了,設(shè)置了<img>的內(nèi)邊距后,你的95*95的內(nèi)容塊已經(jīng)不足以遮住整個<img>,<img>被內(nèi)邊距撐大后,背景圖片也隨著<img>的撐大而變大,所以背景圖片就顯示出來啦;然后設(shè)置右外邊距,使得<img>和<img>之間有10px距離
2016-06-05
img{
padding:1px 20px 37px 30px;
height:95px;
width:95px;
margin-right:10px;
background:url(http://img1.sycdn.imooc.com//5385ac820001905201440133.jpg);
}
padding:1px 20px 37px 30px;
height:95px;
width:95px;
margin-right:10px;
background:url(http://img1.sycdn.imooc.com//5385ac820001905201440133.jpg);
}
2016-06-04
img{width:95px;height:95px;background:url(http://img1.sycdn.imooc.com//5385ac820001905201440133.jpg); padding:1px 20px 37px 30px;margin-right:10px;}
2016-06-01
img{padding:1px 20px 37px 30px;background:url(http://img1.sycdn.imooc.com//5385ac820001905201440133.jpg); width:95px;}
2016-05-31