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>这是我用Webstorm打出来的，但是在右边总是有那么一小点突出，怎么将那两条线合并？还有为什么要将宽度.content的宽度从770减到740并且将图片.img的左右margin从18减到15才能勉强达成目标？视频在http://www.imooc.com/video/1331，而且视频中老师最后将770直接减到700才达成目标，这是为什么
爱逗猫的鱼浏览 2325回答 2
2回答
-
菜鸟一一只
第一个问题 为什么宽度明明相同了 确还是没合并?怎么合并?答: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 纯手动 求采纳 -
blovetu
把这个研究透
随时随地看视频慕课网APP
Html/CSS