加padding之后盒子会被撑大的解决办法

时间:2020-9-14 作者:admin

加padding之后盒子会被撑大的解决办法

盒子代码:

       div{
            margin:0 auto;
            margin-top:400px;
            width:100px;
            height:100px;
            text-align: center;
            border:2px solid black;
        }
    </style>
</head>
<body>
 <div>我是内容</div>

运行示例
加padding之后盒子会被撑大的解决办法

这是正常的页面 然后我们给内容部分加个padding:10px;
效果如下:
加padding之后盒子会被撑大的解决办法
我们可以看到 现在盒子宽度是:100+两个padding+两个border=124px;
同理 宽度是:100+两个padding+两个border=124px;

很明显的 盒子被撑大了

然后我们加入如下代码

box-sizing: border-box;

我们再看下运行截图:
加padding之后盒子会被撑大的解决办法
我们看到浏览器自动计算了内容的宽高从而保持原有的高度和宽度

声明:本文内容由互联网用户自发贡献自行上传,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任。如果您发现有涉嫌版权的内容,欢迎进行举报,并提供相关证据,工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。