關于編程挑戰
為什么我改變內邊距padding的值時圖片會變形？比如我把內邊距1改為10px圖片就受到影響了？
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>圖片背景</title>
<style type="text/css">
body{ margin:0;}
div{background:#460E29;width:700px;padding:20px}
img{ background:url(http://img1.sycdn.imooc.com//5385ac820001905201440133.jpg); padding:1px 20px 37px 30px;}
</style>
</head>
<body>
<div><img src="http://img1.sycdn.imooc.com//5385acb000013b0d00950095.jpg" /><img src="http://img1.sycdn.imooc.com//5385acb000013b0d00950095.jpg" /><img src="http://img1.sycdn.imooc.com//5385acb000013b0d00950095.jpg" /><img src="http://img1.sycdn.imooc.com//5385acb000013b0d00950095.jpg" /> </div>
</body>
</html>
2016-09-24
這道題里面那四張圖片是一瓶香水（指甲油）加上一個大概95*95的白色背景，而給這幾張圖片加的背景是最后效果圖中的花邊和一個白色的大約95*95的框。不給圖片加padding的時候，背景被圖片擋住了，所以就顯示圖片。加了padding之后就顯示一部分背景。如果按照題里面說的{}padding:1px 20px 37px 30px；}，正好可以顯示背景。如果把1px變成10px，那張背景就開始循環了，而且你的圖片的白框和背景的白框就不重合了，所以上面多了一個白條，下面多了一個白條。希望我說明白了。。
2016-09-24
img{ margin-right:10px; background:url(http://img1.sycdn.imooc.com//5385ac820001905201440133.jpg); padding:1px 20px 37px 30px;}
2016-09-24
圖片不是變形了，是你的背景圖片多出來的白色背景是img的背景圖片
2016-09-24
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>圖片背景</title>
<style type="text/css">
body{ margin:0;}
div{background:#460E29;width:700px;padding:20px}
img{background-image:url(http://img1.sycdn.imooc.com//5385ac820001905201440133.jpg); padding:0 25px;}
</style>
</head>
<body>
<div>
? ? <img src="http://img1.sycdn.imooc.com//5385acb000013b0d00950095.jpg" />
? ? <img src="http://img1.sycdn.imooc.com//5385acb000013b0d00950095.jpg" />
? ? <img src="http://img1.sycdn.imooc.com//5385acb000013b0d00950095.jpg" />
? ? <img src="http://img1.sycdn.imooc.com//5385acb000013b0d00950095.jpg" />?
</div>
</body>
</html>