                        课程
                    
                        /前端开发
                        
                            /HTML/CSS
                        
                        /网页简单布局之结构与表现原则

关于编程挑战

为什么我改变内边距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>

everymoment3674130

2016-09-23

源自：网页简单布局之结构与表现原则 3-3

关注问题我要回答

1211

操作

收起

4 回答

Whitney_Wang 回答被采纳 +3 积分
2016-09-24

这道题里面那四张图片是一瓶香水（指甲油）加上一个大概95*95的白色背景，而给这几张图片加的背景是最后效果图中的花边和一个白色的大约95*95的框。不给图片加padding的时候，背景被图片挡住了，所以就显示图片。加了padding之后就显示一部分背景。如果按照题里面说的{}padding:1px 20px 37px 30px；}，正好可以显示背景。如果把1px变成10px，那张背景就开始循环了，而且你的图片的白框和背景的白框就不重合了，所以上面多了一个白条，下面多了一个白条。希望我说明白了。。

3 回复有任何疑惑可以回复我~

#1

everymoment3674130 提问者

非常感谢！

2016-09-24 回复有任何疑惑可以回复我~

qq_旅途_11
2016-09-24

img{ margin-right:10px; background:url(http://img1.sycdn.imooc.com//5385ac820001905201440133.jpg); padding:1px 20px 37px 30px;}

0 回复有任何疑惑可以回复我~

qq_旅途_11
2016-09-24

图片不是变形了，是你的背景图片多出来的白色背景是img的背景图片

0 回复有任何疑惑可以回复我~

qq_旅途_11
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>

0 回复有任何疑惑可以回复我~

举报

0/150

提交

取消

网页简单布局之结构与表现原则

参与学习 108319 人
解答问题 375 个

入门必杀技之结构与表现相分离，课程会有3个案例，不同角度讲解

关于编程挑战

我要回答关注问题

意见反馈帮助中心 APP下载