源自：12-12 宰相肚里能撑船 - 使用padding为盒子设置内边距（填充）
为何盒子会变扁？
<title>填充</title>
<style type="text/css">
#box1{
width:100px;
height:100px;
padding:10px 20px;
border:1px solid red;
}
</style>
</head>
<body>
<div id="box1">盒子1爱的发卡机独守空房吉萨的几份</div>
</body>
如果以上代码，盒子都是100px，正常应该是个正方形啊，为何这些代码运行后盒子变成了一个矩形呢？
我的理解应该是盒子还是正方形，里面的文字分成更多行显示，以保证左右各是20px
现在的结果有点不理解，求教，谢谢！
提问者：轻杯过海
2019-07-30 18:03
个回答
-
- sdarks
- 2019-07-31 09:37:01
我直接在矩形那里右键选择审查元素，看到的结果是这样至于你说的正方形，估计是你已经改了代码。
-
- 轻杯过海
- 2019-07-30 22:16:16
不对吧，我文字内容少打几些字，比如就输入“盒子1”，为何就是边框正方形呢？
-
- sdarks
- 2019-07-30 19:29:42
你看到的矩形估计是边框吧，因为：
你边框的宽度是“左边框1px+左内填充20px+实际内容100px+右内填充20px+右边框1px=142px”
你边框的高度是“上边框1px+顶部填充10px+实际内容100px+底部填充10px+下边框1px=122px”
所以你就看到矩形盒子。