CSS盒子内边距问题

zhu***

盒子模型-练习盒子模型-练习 *{ 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; }

[img=80px,80px]https://www.tianmg.com/.picturebook1.jpg[/img]

[img=80px,80px]https://www.tianmg.com/.picturebook2.jpg[/img]

[img=80px,80px]https://www.tianmg.com/.picturebook3.jpg[/img]

[img=80px,80px]https://www.tianmg.com/.picturebook4.jpg[/img]

[img=80px,80px]https://www.tianmg.com/.picturebook5.jpg[/img]

[img=80px,80px]https://www.tianmg.com/.picturebook6.jpg[/img]

这是我用Webstorm打出来的，但是在右边总是有那么一小点突出，怎么将那两条线合并？还有为什么要将宽度.content的宽度从770减到740并且将图片.img的左右margin从18减到15才能勉强达成目标？视频在http://www.imooc.com/video/1331，而且视频中老师最后将770直接减到700才达成目标，这是为什么

m2317***

第一个问题为什么宽度明明相同了确还是没合并?怎么合并?
答: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
纯手动求采纳

hap***

把这个研究透

已有账号？

找人解决需求

CSS盒子内边距问题

全部参与2

热门问答

zhu***

今日需求悬赏

今日问答求助

发布任务需求已有1031166位用户正在使用天盟网服务

新手帮助

平台规则

关于天盟

一键快捷导航

微信公众号

手机客户端