欢迎访问我的的博客,网站主要用于记录学习WEB语言|CMS建站|SEO优化及日常工作常见问题总结!
您的位置:主页 > HTML/CSS >

盒子模型的计算公式及使用技巧

css盒子模型padding和margin的区别

  1. padding是内边距,会影响我们在浏览器中看到的元素的实际大小,内边距会让元素的内容增大,和其他元素没有关系!
  2. 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的值,否则内容会溢出

上一篇标题:background-color背景颜色
下一篇标题:padding和margin的区别

相关文章

 

文章-盒子模型的计算公式及使用技巧发布日期:2021-04-01 16:57作者:admin
如需转载,请注明文章出处和来源网址:https://www.dhnblog.com/htmlcss/236.html