                        課程
                    
                        /前端開發
                        
                            /HTML/CSS
                        
                        /初識HTML(5)+CSS(3)-升級版

盒子的寬度和高度包含Margin嗎

為什么加上margin啊，那樣如果有兩個盒子的話，margin的值不是被重復計算了嗎

JZHHHHH

2015-04-13

源自：初識HTML(5)+CSS(3)-升級版 12-7

關注問題我要回答

946

操作

收起

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了。