css盒子模型的宽度不包括margin

最新推荐文章于 2022-10-11 22:30:00 发布

weixin_33994444

最新推荐文章于 2022-10-11 22:30:00 发布

阅读量2.8k

点赞数 1

原文链接：http://www.cnblogs.com/qjuly/p/8984578.html

版权

看到教程上和一些博客上盒子模型的宽度 = content + padding + margin + border,应该是不包括margin的

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>css盒子模型的宽度</title>
    <style type="text/css">
    *{
       margin:0;
       padding:0;
    }
    div {
    background-color: lightgrey;
    width: 300px;
    border: 25px solid green;
    padding: 25px;
    margin: 30px;
    }
    </style>
  </head>
  <body>
   <div>
     盒子模型不包括margin
   </div>
  </body>
</html>

　　浏览器显示：

我们来算一下盒子模型的宽度：如果按照其它教程上应该是

content + padding + margin + border 我们来计算一下

300 + 25*2 + 25*2 + 30*2 = 460

而我们实际上浏览器显示是400

这就证明盒子模型并不包括margin的边距

转载于:https://www.cnblogs.com/qjuly/p/8984578.html

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

weixin_33994444

关注关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
css盒子模型的宽度不包括margin

看到教程上和一些博客上盒子模型的宽度 = content + padding + margin + border,应该是不包括margin的<!DOCTYPE html><html> <head> <meta charset="UTF-8" /> <title>css盒子模型的宽度</title...
复制链接

扫一扫