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

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

為什么加上margin啊，那樣如果有兩個(gè)盒子的話，margin的值不是被重復(fù)計(jì)算了嗎

JZHHHHH

2015-04-13

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

關(guān)注問題我要回答

944

操作

收起

1 回答

Perona
2015-04-13

是的，如果是相鄰的2個(gè)盒子同時(shí)設(shè)置margin值，margin值就是這2個(gè)盒子的margin之和。

舉個(gè)栗子，在頁面中設(shè)置2個(gè)DIV，并且讓它們左浮動(dòng)，同時(shí)設(shè)置他們的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了。