盒子的宽度和高度包含Margin吗-慕课网

首页课程实战体系课手记专栏慕课教程

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

来源：12-7 长胖长高点--宽度和高度

JZHHHHH

2015-04-13 19:42

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

写回答关注

1回答

Perona: 2015-04-13 21:21:31

是的，如果是相邻的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了。

0 0

初识HTML(5)+CSS(3)-升级版

HTML(5)+CSS(3)基础教程8小时带领大家步步深入学习标签用法和意义

1228268 学习 · 18414 问题

查看课程

相似问题

盒子的宽度与高度

回答 3

div盒子的宽高度

回答 2

盒模型--宽度和高度

回答 3

盒模型--宽度和高度

回答 2

一个盒子的宽度

回答 2

打开慕课网App查看更多内容