- 代码如下:
<!DOCTYPE html>
<html lang="zh-cmn-Hans">
<head>
<meta charset="utf-8" />
<title>linear-gradient()_CSS参考手册_web前端开发参考手册系列</title>
<meta name="author" content="Joy Du(飘零雾雨), dooyoe@gmail.com, www.doyoe.com" />
<style>
*{
margin: 0;
padding: 0;
}
body {
border: 1px solid yellow;
}
div {
width: 200px;
height: 100px;
margin-top: 10px;
border: 1px solid #ddd;
}
</style>
</head>
<body>
<div class="test"></div>
</body>
</html>
给body加上border: 1px solid yellow;
样式后,body的高度为div的高度加上margin-top,不加border: 1px solid yellow;
时body的高度和div的高度一样。
为什么呢?
大盒子套小盒子
- 代码如下:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
* {
margin: 0;
padding: 0;
}
div {
display: inline-block;
}
.big {
border: 1px solid #000;
cursor: pointer;
}
.small {
width: 200px;
height: 200px;
background-color: blue;
padding: 10px;
margin: 10px;
}
</style>
</head>
<body>
<div class="big">
<div class="small"></div>
</div>
</body>
</html>
大盒子没有border属性时,高度为220px,即height加padding,但是当大盒子加上border属性时,会包括小盒子的margin,所以变大。