您好,欢迎来到伴沃教育。
搜索
您的当前位置:首页在定宽的盒子模型中padding是往里挤内容还是外挤扩大盒宽

在定宽的盒子模型中padding是往里挤内容还是外挤扩大盒宽

来源:伴沃教育

我们都知道padding 是边框和里面内容之间的间隙,但是在定宽、高的盒子里padding会撑开盒子。我们来看下面的例子:
代码:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<style type="text/css">
    *{
        margin:0;
        padding:0;
    }
    div{
        width:400px;
        height:400px;
        border:5px solid red;
    }
</style>
</head>

<body>
<div></div>
</body>
</html>
不算边框宽高都为400px.png padding等于100px后不算边框宽高都为600px.png
所以可以看出在css样式中定义的盒子的宽width、高height实际上是盒里内容的宽width、高height,不管盒子里有没有内容都会撑大盒子,对我这样的前端小白使用的时候真是要多注意啊!


附上一张关于盒子宽度的图:

盒子总宽度.jpg

声明:此文只代表个人见解,只供参考!联系QQ:1522025433

Copyright © 2019- bangwoyixia.com 版权所有 湘ICP备2023022004号-2

违法及侵权请联系:TEL:199 1889 7713 E-MAIL:2724546146@qq.com

本站由北京市万商天勤律师事务所王兴未律师提供法律服务