                        课程
                    
                        /前端开发
                        
                            /HTML/CSS
                        
                        /初识HTML(5)+CSS(3)

盒子的宽度和高度包含Margin吗

为什么加上margin啊，那样如果有两个盒子的话，margin的值不是被重复计算了吗

JZHHHHH

2015-04-13

源自：初识HTML(5)+CSS(3) 12-7

关注问题我要回答

961

操作

收起

1 回答

Perona
2015-04-13

是的，如果是相邻的2个盒子同时设置margin值，margin值就是这2个盒子的margin之和。

举个栗子，在页面中设置2个DIV，并且让它们左浮动，同时设置他们的margin值分别为20px和30px。

这是CSS样式

div{float:left; height:100px; width:200px;}
#box1{background: #F00; margin-right:20px;}
#box2{background:#FF0; margin-left:30px;}

这是HTML

<!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>margin</title>
</head>
<body>
	<div id="box1"></div>
	<div id="box2"></div>
</body>
</html>

你试试看，margin值是不是就是50px了。