css盒子模型padding和margin的区别
- padding是内边距,会影响我们在浏览器中看到的元素的实际大小,内边距会让元素的内容增大，和其他元素没有关系!
- margin是外边距,不会影响我们在浏览器中看到的元素的实际大小,外边距不会让元素的内容增大，是和另一个元素的间距
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
/*盒子的实际宽高大小是多少?*/
.content{
width: 100px;
height: 250xp;
border: 10px solid #f90;
border-left: 40px;
padding: 10px 30px;
margin: 10px 20px 30px;
}
/*实际宽度:100+30+10+30=170px*/
/*实际高度:250+10+10+10+10=290px*/
</style>
</head>
<body>
<div class="content"></div>
</body>
</html>
css盒子模型的计算
- 元素的实际宽度=宽度width+padding-left/padding-right+border-left/border-right
- 元素的实际高度=高度height+padding-top/padding-bottom+border-top/border-bottom
口号:元素的实际大小只会受padding和border的影响跟margin没有关系,如果加了padding和margin值,要在width和height的值上减去padding和margin的值,否则内容会溢出
转载请注明：大灰牛博客 » 盒子模型的计算公式及使用技巧