CSS盒子内边距问题

盒子模型-练习 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>盒子模型-练习</title> <style type="text/css"> *{ padding: 0px; margin: 0px; } img { border:1px solid #BADBDB; margin:10px 15px; } .content { border: 4px solid #BADBDB; width: 740px; background:url("./picture/t_book.gif") no-repeat; background-color: #EFF9F9; padding: 44px 15px 15px; } </style> </head> <body> <div class="content"> <img src=".\picture\book1.jpg" width="80px" height="80px"> <img src=".\picture\book2.jpg" width="80px" height="80px"> <img src=".\picture\book3.jpg" width="80px" height="80px"> <img src=".\picture\book4.jpg" width="80px" height="80px"> <img src=".\picture\book5.jpg" width="80px" height="80px"> <img src=".\picture\book6.jpg" width="80px" height="80px"> </div> </body> </html>

第一个问题为什么宽度明明相同了确还是没合并?怎么合并?答:1.之所以没合并是所有元素初始设置时浏览器都添加了默认的margin 或padding值的2.怎么合并呐? 此时只需要，加上下面这句就可以删除浏览器这些默认值，方面后面的设置。（注：不是没它不行，只是方便而已）*{margin: 0 ;padding: 0 ;}或者body{margin: 0 ;padding: 0 ;}第一种方法不建议使用第二和第三个是同一个问题就一起说了理解时请结合下图标注的红色数字理解你应该是疑惑明明设置了.center的宽度为770 (跟背景图的宽度770一致了) 怎么还会存在空隙,两者无法合并对吧也就是我图上那种情况我背景图宽度510 代码也设置宽度 width 为510了怎么还是有空隙呐呵呵,简单说你把概念混淆了 ***************盒子尺寸并不是 width 哈*************盒子尺寸是: margin X 2 +padding X 2 + border X 2 +width 所以才有了图片 ① 中宽度为 548 而不是510 说的有些啰嗦了不知道你看懂没?不懂的话建议回顾下 HTML+CSS基础课程中的盒模型视频地址 http://www.imooc.com/video/3225 纯手动求采纳

CSS盒子内边距问题

2回答